I'm using OBS to push live stream to my local rtmp server(node-rtsp-rtmp-server),
and it works well with VLC media player.
I just want to put it into a webpage and i found videojs.
It didnt work and returns Specified “type”-attribute “rtmp/mp4” is not supported.
it seems my rtmp server didnt reveive any requests from this webpage.
So what i missed?
here is my code:
<head>
<meta charset="utf-8">
<link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
<script src="./video-js-6.0.0/video.js"></script>
<script src="./video-js-6.0.0/videojs-flash.min.js"></script>
<script>
videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
</script>
</head>
<body>
<video id='vid' class='video-js' controls height=300 width=600>
<source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
</video>
<script>
var player = videojs('vid');
</script>
</body>
To publish a stream from a RTMP server to a web page, you have 2 options:
embed RTMP stream in a Flash player (Strobe, JwPlayer, FlowPlayer)
deliver stream in a HTML5 format (HLS or MPEG DASH) using a streaming server that supports that like Wowza Streaming Engine; this may also require transcoding if your stream is not already encoded with H264 and AAC
<html>
<head>
<title> Stream Player </title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
<center>
<video
id="livestream"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
preload="auto"
data-setup='{"techorder" : ["flash","html5] }'>
<source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
</video>
</center>
</body>
</html>
The data-setup techorder parameter seems to be necessary for videojs to use flash.
If that doesn't work then make sure that your javascript files are all good. As of version 6 of video.js it no longer supports flash by default. https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs
I am using nginx for my server.
https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/
https://github.com/arut/nginx-rtmp-module
If you would rather use a CDN for the video.js and video-js.css files replace the head with
<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>
Note: Your time is better spent learning HLS or DASH rather than flash
Browsers don't support RTMP. The only way to connect to RTMP streams in-browser is to use Flash.
Consider using a more compatible distribution protocol, such as DASH, which is supported with Media Source Extensions.
If it works when using vlc media player, it means your rtmp server is ok.
You have to check whether the browser support flash or not. Since we realized that latest versions of chrome and Firefox automatically block flash by default. We were able to fix the issue by simply allowing flash on website. There was nothing wrong with video.js and videojs-flash. Plz refer to the attached screenshot.
Related
I have a Raspberry-Pi converting an RTSP-Stream to HLS-Segments via ffmpeg.
Now when I try to embed the Stream,
I use this:
<head>
<!-- CSS -->
<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
</head>
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://192.168.2.45/files/hls/live.m3u8">
</video>
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
Working like a charm on the local raspberrypi apache2 Server.
Now the problem is, I cannot display this stream with the identical code on a seperate device.
What am I doing wrong?
Is there a Firewallport I need to open?
I dont think so?
I can access the files when opening: http://192.168.2.45/files/hls/ on the seperate device.
The issue was Server-To-Server communication restriction. You need to enable this setting in the Apache Server file.
This setting is called CORS.
I have a page with this html :
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac" />
</audio>
It works on Firefox and Edge but it doesn't on IE11. My windows version is up to date and I saw it should be supported. I tried to change my settings to be sure ActiveX is enabled and it is.
I also tried with :
<audio controls="controls" src="http://techslides.com/demos/samples/sample.aac">
It doesn't works too.
What can I do?
I tested the sample code with IE 11 browser and I am able to produce the issue.
I try to check the documentation and found this information.
Beginning with Windows Internet Explorer 9, any audio or video content
needs the correct mime type set on the server, or the files won't
play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video.
WebM audio and video files can be supported by installing the WebM
components from The WebM project. The following table shows the
required settings for your web server to host these files correctly.
Microsoft Edge updates introduced WAV support.
Reference:
audio element | audio object
you can see that .AAC format is not in the list but sites like MDN and CANIUSE shows that it is supported.
I also tried with audio type mp4 which also did not worked.
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4" />
</audio>
It also can be possible that it is some kind of bug with IE browser or issue is related with H.264 format.
As a work around, I suggest you to use mp3 file format which is working fine with IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<audio controls="controls">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg3" />
</audio>
</body>
</html>
I want to play rtmp in WeChat and it can play on my PC browser, but in WeChat browser on Android, it returns:
"No compatible source was found for this video"
But on iPhone it just shows an infinite loading screen.
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://www.pageresource.com/wallpapers/wallpaper/bleach-ichigo-mugetsu-here-size-original_215405.jpg"
data-setup="{}">
<source src="rtmp://hsn.mpl.miisolutions.net/hsn-live01/mp4:420p500kB31" type='rtmp/mp4'>
<!--source src="rtmp://219.232.161.204/livestream/mtzysunq" type='rtmp/mp4' / -->
<!--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
<!--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
</video>
No browser supports rtmp without flash. videojs uses a flash fallback for rtmp (video-js.swf). Mobile devices do not support flash, hence no flash fall back, hence no video. You need to use a format other than rtmp. Like mp4, hls or dash.
So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).
I'm trying to follow the custom module tutorial at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces/creating-your-own-modul
I've got a local deployment of dojo at http://localhost:8081/dojo-1.3.2/dojo/dojo.js
For my custom module I've created the following javascript file at http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js:
dojo.provide("explosive.space.Modulator");
dojo.declare("explosive.space.Modulator",null,{
bob:1
});
In my html page I have the following:
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
</script>
And when I pull up my site in firefox I get the error:
Error: Could not load
'explosive.space.Modulator'; last
tried
'../explosive/space/Modulator.js'
Any ideas on what I'm doing wrong?
EDIT: After more testing it appears the code works on IE8 and IE8 compatibility mode but not in Firefox, Chrome, or Opera.
EDIT2: My html file was on a different domain but I didn't think that should make any difference. After reading Seth's comment (thanks Seth!) I tried it both ways.
I have two tomcat instances, one on port 8080 and one on port 8081. I've placed index.htm in both instances and started them both up.
http://localhost:8081/test/index.htm works in both FF and IE. http://localhost:8080/test/index.htm does not work as expected in FF, but does work in IE.
Show XmlHTTPRequests shows that FF is making a call to "GET http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js" which is coming back with an empty response for some reason.
Here's the entirety of my code for index.htm if it's any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Create Map</title>
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
function init(){
var eludiumFuel36 = new explosive.space.Modulator();
alert(eludiumFuel36.bob);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1>Hello World!</h1>
</body>
</html>
It looks ok from what you have here. When you bring up the page, are you going to http://localhost:8081/testpage.html (or somesuch)? Or are you going to a different domain?
Do you have firebug installed? If not, install it and turn on 'Show XMLHttpRequests'. That will show what URL it's trying to access in the console (and any other possibly relevant errors).
Otherwise, there might be something else on the page outside of what you posted messing with dojo's load path.
Edit
When dojo does an dojo.require, it does a XHR call for the file. The includes the host and port in it. So, it's violating cross domain security when the html page is on localhost:8081 but the javascript is on localhost:8080. You can get around this by using a cross-domain build version of the file (or make sure all requests come on the same port and host). Truth be told, I'm not quite sure why IE works with the different ports though.