How to play H.264 video in browser? - html

I have transcoded each frame of my video from RGB -> YUV12 -> H264. On the exit I have H.264 video stream and I want to watch it without VLC media player and etc.
Stream should be available from different devices such as PC, tablet, smartphone in this way
I will use only browser.
Which method to choose?
Maybe Flash helps? Transcode video from h.264 to mp4? Anything else?
Thank you for any idea.

The <video> tag supports RTSP streams.
On Firefox, Chrome and IE9+, you can use:
<video src="rtp://domain.com/stream">
Your browser does not support RTP streams.
</video>
or
<video src="rtsp://domain.com/stream">
Your browser does not support RTP streams.
</video>
In good old IE8, VLC comes with an ActiveX plugin (VLC web-plugin) that allows video streaming:
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
width="640" height="480" id="vlc" events="True">
<param name="Src" value="rtsp://cameraipaddress" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
target="rtsp://cameraipaddress" ></embed>
</OBJECT>

Related

Embedding video for Chrome without NPAPI support

Im building a site where video will be stream from mp4/m4v files on the server.
I am having trouble making this work in Chrome 47, evidently due to lack of NPAPI support.
Here are some variations of code I have tried and the results:
<video controls>
<param name="video" value="true" />
<source src="app/files/s1e1.m4v" type="video/mp4">
<source src="app/files/s1e1.m4v" type="video/ogg">
Your browser does not support the video tag.
</video>
Result: I get a javascript error frame with an message reading "This plugin is not supported"
<object width="100%" height="360">
<param name="movie" value="app/files/s1e1.m4v"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="100%" height="360" src="app/files/s1e1.m4v" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
Result: The player renders and seems to load the file evidenced by the correct video length being displayed in the player, but video does not play when I hit the play button.
Either method works perfectly in Safari.
Which method is best for cross-browser support?

MediaElement flash fallback getting called twice

I have integrated the medialement player. It works great on all browsers except firefox. As I am trying to integrate a mp4 video. I know that firefox does not support mp4, and hence setup a flash fallback. The flash fallback works, but it gets called twice. And I have 2 instances of the player getting played simultaneously. Any idea why would this happen?
The code:
<video id="player1" width="700" height="430">
<source type="video/mp4" src="'+videoUrl+'" />
<object width="700" height="430" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="/assets/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file="'+videoUrl+'" />
</object>
</video>
The videoUrl is submitted by the user. The user is given a prompt to paste the URL.

Why does Chrome keep attempting to mount mp4 files when it can't play them?

Why does Chrome keep attempting to mount mp4 files when it can't play them?
I am working on a PC Windows 7, IE 10, Chrome Version 25.0.1364.172.
It doesn't matter whether mp4 source line is before or after the object lines, Chrome seems to want to mount the mp4 files even if it can't play them.
I would like to play the mp4 file in IE 10 and the flash equivalent in Chrome, but I can't seem to make any combination of line ordering work.
So far, my only workaround is to use flash in both browsers. But why do I have to? I thought the html5 video tag was supported by both browsers?
Is this the correct way for a flash fallback to be coded, as it doesn't seem to be working. Is there a way to code this so I don't have to use flash in IE 10, which can play the mp4 files native?
Thanks for whatever assistance you can give me.
Here's a copy of the code generated at http://sandbox.thewikies.com/vfe-generator/
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="Mark.jpg" width="640" height="480">
<source src="Mark.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="640" height="360">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image=Mark.jpg&file=Mark.mp4" />
<img alt="Mark" src="Mark.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
</object>
</video>

Player Appears, but Video Doesn't Play

My video player shows, but when I click play it acts as if it is loading the video, stops, but doesn't play.
<object width="100%" height="100%"
type="video/x-ms-asf" url="videos/agent_orange.wmv" data="videos/agent_orange.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="videos/agent_orange.wmv">
<param name="filename" value="videos/agent_orange.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="videos/agent_orange.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
This came from a tutorial from here.
Video embedding is not natively supported in HTML 4. Media playback highly relies on the available media plug-ins so compatibility is a big issue.
In order for WMV to work on most browsers the user must have the correct plugin installed.
The best solution would be to use multiple video formats as fallback solutions. I would highly recommend looking at HTML 5 and the multimeda elements you can use are much more advanced than the ones in HTML 4. Using the Video element in HTML 5 would allow you to use:
MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec
If you had all of these video formats as fall backs then it would work in most browser (ie 9+)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.WebM" type="video/WebM">
Your browser does not support the video tag.
</video>
var player = $("object")[0];
player.controls.play();

display mp4 video in html5

I'm trying to get my site using html5 instead of those ancient horrible horrible embed/object stuff. I exported the html to a test page.
It doesn't work for me in Firefox or Chrome (on a Mac). Here are the goodies on this page:
<video width="500" height="350" controls="controls">
<source src="/temp/output.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" standby="video loading" scale="aspect" HEIGHT="350" WIDTH="500" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="/content/preview/350/aerial-tour-of-thebes-ramusseum.mov" >
<PARAM NAME="autoplay" VALUE="true" >
<param name="controller" value="true"><param name="loop" value="true">
<param name="scale" value="aspect"/>
<EMBED scale="aspect" HEIGHT="350" WIDTH="500" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" SRC="/content/preview/350/aerial-tour-of-thebes-ramusseum.mov" controller="true" loop="true" AUTOPLAY="true"/>
</OBJECT>
</video>
Two questions :
what's wrong with this code? I know mp4 is a valid format for html5, right? What's the deal? and
Isn't the point of all of this to degrade nicely in browsers that don't have support? I just see a gray box with an x in it. Shouldn't it execute the object/embed stuff and show the video the way it used to?
Some browsers doesn't support MPEG4 for licensing reasons. This format is patented, so developers of these browsers would have to buy patent license for every user of their browser.
Firefox currently supports Ogg Theora and WebM.
Here you have format support matrix across various browsers/operating systems:
http://en.wikipedia.org/wiki/HTML5_video#Table