Menu
My company is starting to role out a large number of online tutorial/training videos, which are to be displayed inline on a webpage. We need a simple cross-browser solution that can accommodate a majority of users for inline viewing.
One solution I've read about (which isn't very simple), is to create a flash, mp4, and avi version of each video, and let a javascript plugin determine which the browser works best with.
826
Cross-browser compatibility is the ability of a website or web application to function across different browsers and degrade gracefully when browser features are absent or lacking.
I've experimented a bit with having video play across all browsers. The best way to do this is to set up an html5 video tag with a flash fallback. This actually does not require any javascript to work. This site: http://camendesign.com/code/video_for_everybody gives a great explanation on how to do this.
You're going to want to set something up that basically looks like this:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
The video tag is an html5 tag that you can use to show video files on modern browsers. However you are going to need several different formats to display it properly in each one. For instance, Firefox only takes the webm and ogg formats whereas Safari only takes h264 and mp4 formats. Here's a great article on this: http://diveintohtml5.ep.io/video.html. A simple converter software you can download to convert your videos into all these formats can be found here: http://www.mirovideoconverter.com/. Other browsers (especially IE) do not take the html5 video tag so instead you have to include a flash format that it will automatically fall back on if it doesn't know what to do with the video tag.
In the end you will have to create at least 3-4 different formats of your one video file to get this working across browsers and platforms (iOS mobile) due to the lack of compatible standards. It is also important to make sure your server is using the correct mime-types for these formats. It sucks but for now it's the only way.
148
The best solution so far:
http://www.videojs.com/
How to implement:
head:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
body:
<div class="vid">
<video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px"
poster="../../Content/YourInitialPicture.jpg">
<source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE / Safari -->
<source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF -->
<source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome / Opera -->
<track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" />
</video>
<script>
var myPlayer = _V_("vid01");
</script>
</div>
Copy/Paste above code to your <body></body> and add your video's path to src="../../"
you can use these free conventers for your videos.
Simple as this!
24
For a commercial solution check out http://www.sublimevideo.net/
For free check out http://www.videojs.com/
26
I have been researching this for quite a while and I am trying to do the same thing, so hopefully this will help someone else. I have been using crossbrowsertesting.com and literally testing this in almost every browser known to man. The solution I've got currently works in Opera, Chrome, Firefox 3.5+, IE8+, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Dynamically Changing Sources
Dynamically changing the video is very difficult, and with a Flash fallback you will have to remove the video from the DOM/page and re-add it so that Flash will update because Flash will not recognize dynamic updates to Flash vars. If you're going to use JavaScript to change it dynamically, I would completely remove all <source> elements and just use canPlayType to set the src in JavaScript and break or return after the first supported video type and don't forget to dynamically update the flash var mp4. Also, some browsers won't register that you changed the source unless you call video.load(). I believe the issue with .load() you were experiencing can be fixed by first calling video.pause(). Removing and adding video elements can slow down the browser because it continues buffering the removed video, but there's a workaround.
Cross-browser Support
As far as the actual cross-browser portion, I arrived at Video For Everybody as well. I already tried the MediaelementJS Wordpress plugin, which turned out to cause a lot more issues than it resolved. I suspect the issues were due to the Wordpress plug-in and not the actually library. I'm trying to find something that works without JavaScript, if possible. So far, what I've come up with is this plain HTML:
<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>
Important notes:
<source> because Mac OS Firefox quits trying to play the video if it encounters an MP4 as the first <source>.video/ogg, not video/ogv
.iphone.mp4 file is for iPhone 4+ which will only play videos that are MPEG-4 with H.264 Baseline 3 Video and AAC audio. The best transcoder I found for that format is Handbrake, using the iPhone & iPod Touch preset will work on iPhone 4+, but to get iPhone 3GS to work you need to use the iPod preset which has much lower resolution which I added as video.iphone3g.mp4.media attribute on the <source> elements to target mobile devices with media queries, but right now the older Apple and Android devices don't support it well enough.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
