Cross-browser compatible inline video solution

html video cross-browser

12,421

Solution 1

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&amp;image=__POSTER__.JPG&amp;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.

Solution 2

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="../../"

.mp4 (Safari and IE can play this type of vids)
.webm (Mozilla can play this type of vids)
.ogg (Theora video)

you can use these free conventers for your videos.

Free Video Converter (This conventer is easy to use.. I personally prefer this.)
Free WebM Video Converter

Simple as this!

Solution 3

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:

Ended up putting the ogg as the first <source> because Mac OS Firefox quits trying to play the video if it encounters an MP4 as the first <source>.
The correct MIME types are important .ogv files should be video/ogg, not video/ogv
If you have HD video, the best transcoder I've found for HD quality OGG files is Firefogg
The .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.
In the future we will be able to use a 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.

Solution 4

For a commercial solution check out http://www.sublimevideo.net/

For free check out http://www.videojs.com/

View more solutions

12,421

Author by

Eric Di Bari

Updated on June 20, 2022

Comments

Eric Di Bari almost 2 years

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.
Alex about 10 years

Good solution. Also the first suggested video converter is very nice.
Octopus about 9 years

You could use ffmpeg if you only want to convert it to mp4.