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
Related
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?
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>
What's the correct way of adding a .mov file to a webpage?
I'm just adding this functionality to an existing file so I can't convert it to HTML5. The file is on the same server about 1G in size.
The client also doesn't want to use YouTube or Vimeo as it's on the homepage.
Had issues using the code in the answer provided by #haynar above (wouldn't play on Chrome), and it seems that one of the more modern ways to ensure it plays is to use the video tag
Example:
<video controls="controls" width="800" height="600" name="Video Name">
<source src="http://www.myserver.com/myvideo.mov">
</video>
This worked like a champ for my .mov file (generated from Keynote) in both Safari and Chrome, and is listed as supported in most modern browsers (The video tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.)
Note: Will work in IE / etc.. if you use MP4 (Mov is not officially supported by those guys)
<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="qtsrc" value="rtsp://realmedia.uic.edu/itl/ecampb5/demo_broad.mov">
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src="sample.mov" qtsrc="rtsp://realmedia.uic.edu/itl/ecampb5/demo_broad.mov" width="320" height="256" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
</object>
source is the first search result of the Google
Well, if you don't want to do the work yourself (object elements aren't really all that hard), you could always use Mike Alsup's Media plugin: http://jquery.malsup.com/media/
I am having some trouble trying to figure out what is causing HTML5 video to be extremely slow loading/playing in Safari. I have tested the same below code on Chrome, Firefox, IE (irrelevant as it uses the flash) and the load/play times are nearly instant. But on Safari, I need to wait pretty much a whole minute before it starts playing. I had tried removing the video's 'autobuffer' parameter, but made no difference. Any ideas?
<video id="video-window" autoplay="autoplay" autobuffer="autobuffer">
<source src="testvideo.mp4" type='video/mp4' />
<source src="testvideo.webm" type='video/webm' />
<source src="testvideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="player.swf" width="640" height="480">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="autoplay" value="true">
<param name="flashvars" value="testvideo.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<p>Your browser can’t play HTML5 video.</p>
</object>
</video>
You need to use Handbrake and check the Web optimized option when encoding. I have no clue why but this reduces Safari lag dramatically. Still not as speedy as other browsers but much better.
I have an audio element in a webpage for a client and i have coded it as well as i can but i still can't get it to work on All browsers. I know cross browser and browser editions (i.e. internet explorer 6,7,8,9 ) with audio is tricky but there has to be an answer here. Can this be done and without needing browser plugins? Here is my current code.
<audio preload="auto" autobuffer autoplay="autoplay">
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.mp3"/>
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.ogg" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.au" />
<source src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wma" />
<!-- browser compatibility fallbacks -->
<object>
<param name="autostart" value="true">
<param name="src" value="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.wav" controller="false" HIDDEN="TRUE" autoplay="true" autostart="True" type="audio/wav" />
<embed src="http://brodysfurniture.com/wp-content/themes/Brodys/images2/08_Track_8.mp3" controller="false" HIDDEN="TRUE" autoplay="true" autostart="True" type="audio/mpeg" />
</object>
<!-- End browser compatibility fallbacks -->
</audio>
I would look here for some answers. I personally have made a page that uses the native <audio> element but provides a WMP fall back for the less tech savvy users that insist on using old deprecated software.