I read that the HTML5 video tag can't stream video...
By streaming i mean the possibility to download a video only from the middle of it and not from the beginning.
Apparently you can set the currentTime to the middle but in the background it will download all the movie.
On the other hand YouTube's HTML5 player seems to stream just fine.
What is it that I am missing?
Thanks...
Related
I need video player for play M2T format, streaming come from live camera, i need to show video from browser, now i can see it with VLC, any ideas?
I have a video element in my HTML code. That video element plays a video (video is coming from AWS Chime SDK). I need to get the audio stream for the audio coming from that video element for analysis (eg. for generating transcriptions). Is it possible to get an audio stream from that video element? If yes, how?
I figured out how to stream video from the camera on the Raspberry Pi, and how to receive and view it in the browser with an URL like:
http://picamhq:8080/?action=stream
The type of video is M-JPEG, and info on mjpeg-streamer is here.
Now, as the browser is capable to play this video stream, I expect that should also work inside a HTML web page. The advantage would be that such web page can additionally show some buttons to start and stop the streamer, and to change parameters, such as camera settings.
I looked into several answers of questions like How to embed streaming Video (rtmp) in HTML, but that is not about embedding the video in a html page.
I tried with a video tag like:
<video width="320" height="240" autoplay controls>
<source src="http://picamhq:8080/?action=stream" type="video/mjpeg">
Your browser does not support the video tag.
</video>
Unfortunately, this does not work. The web page shows a dark rectangle where the video should play, and it seems to take forever to load the entire stream, which of course is not productive, as the stream will never end. Besides, I want low latency :-)
Then I looked at info like this SO question on live html streaming which talks about lots of complex stuff. Does that mean that the nice and simple mjpeg-streamer cannot make a stream that is compatible with the html video tag? And that a stream that the browser can play, does not necessarily work inside a html page?
The solution you are using is not actually streaming video it is sending a stream of individual JPEG images.
From the documentation:
This plugin streams JPEG data from input plugins via HTTP
If you look at a demo site for MJPEG_Streamer you can see this also as the output from the stream is displayed in an 'img' tag rather than a 'video' tag:
<p id="streamwrap" class="xform-p">
<img id="streamimage" class="xform" src="/?action=stream">
</p>
(from: http://hashey.dip.jp:8090/stream.html - note the demo does not appear to be sending a stream at the time of writing).
You could convert this stream to video or for your requirements you might just need to add control to start and stop making requests to get the current image from the stream.
I'm not an expert on the start/stop thing (you can control the camera with ajax calls to the raspberry webserver, i assume), but how about using an iframe for display?
<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
Is there any way I can detect via javascript what is the framerate from the video referenced in the video html5 tag?
I'm also looking for bitrate and codec information since html5 video player is codec agnostic.
thanks
The FPS is stored in the metadata of the video file's header.
Here is an implementation API of what you are looking for: https://github.com/X3TechnologyGroup/VideoFrame
http://jsfiddle.net/Ck6Zq/184/
I have had a look at a couple of players like Flow Player, JW Player and a couple more but I can't get it to work exactly in PHP code.
Is there any way to play FLV within HTML Video Tags?
I know MP4 and OGG files will but the thing that I am working on will produce an FLV file.
You should look at video.js from www.videojs.com I have been using it streaming live video feeds. It mimicks the video tag like this:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Works very well for me.
You might consider using some other players that are able to play FLV files; Known browsers (Chrome, Firefox etc...) are not able to run FLV files untill or unless you use some kind of flash player.
If you are using PHP, you might want to use a flash player! Use Adobe Flash Player, don't be shy! YouTube and many other websites use it.
You can also try to stick to the flayers you have already tried.
You can convert videos to MP4 or format of OGG. So that every browser can play the video file using the HTML5 <video></video> tag.
But Remember: Each browser has its own limitaion for playing a video file; you can read browser support here: Mozilla Developer Network
Play it with Flash. I think it is the only way: http://css-tricks.com/forums/topic/how-to-play-flv-in-html5/
You can do it using flv.js or via MediaElement.js (that will use flv.js underneath), although the support is limited to FLVs that contain H.264 video with AAC/MP3 audio.
Use MediaInfo software or your favorite video player to check what codecs are used in your FLVs.
And if you have H.264 + AAC inside, you can also convert it to MP4 losslessly, without reencoding:
ffmpeg -i input.flv -codec copy output.mp4
Technically speaking the HTML5 video specification is codec/protocol agnostic so one could imagine support for flv files could be possible. Problem is: none of the major web browser has implemented it (probably because flv is a proprietary container from Adobe). You will need a flash component to play it back. Either one of the players you mentioned or if you are looking for a standalone free flash player try strobe from Adobe. You can try it here.
If you can produce .f4v files you may have success in renaming them to mp4 and then try and play them in an HTML5 video tag.