3

Normally to embed video into an HTML5 page I use the following:

<video poster="">
    <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="video/demo.mp4"></source>
    <source type="video/ogg; codecs="theora, vorbis"" src="video/demo.ogg"></source>
    <source type="video/webm; codecs="vp8, vorbis"" src="video/demo.webm"></source>
</video>

I know, there is no flash fallback. In this situation I didn't need one but that is not the purpose of this question.

My question is how to embed video that can serve both mobile and desktop browsers? Lets say this demo video is somewhere in the range of 20MB. Using the canplaythrough like so:

var onCanPlay = function(event) {
    initLoad = false;
    video.controls = true;                          
    sb.removeEvent(this, 'canplaythrough');
    sb.removeEvent(this, 'load');
        return false;
    };
if(initLoad) {
    video.play();
    if(video.readyState !== 4) {
        video.addEventListener('canplaythrough', onCanPlay, false);
        video.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
        setTimeout(function(){
            video.pause(); //block play so it buffers before playing
        }, 1);
    }
} else {
    if(video.currentTime > 0 && video.paused == false) {
        video.play();
    }
}

Note: Ignore the sb in front of my event handlers. I implement a custom event handler on my frontend framework and I copied this directly from production code.

Is typically the way I handle loading the video enough so that it will play seamlessly back to the user. Which works fine, but on mobile...because its such a large video file it takes a long time to load and quite honestly ruins the experience.

Is the answer to present a mobile version and a desktop?

<video controls>
   <source src="demo-small.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="demo.webm" type="video/webm">
</video>

I've read a few things about media queries being removed from spec and its got me rethinking if I am even serving video the right way at all. Maybe it would be better to somehow stream the video from the server and avoid the HTML5 tag altogether? If thats the case I could use some direction...

ryandlf
  • 27,155
  • 37
  • 106
  • 162

1 Answers1

0

I have 2 recommendations for you. First take advantage of the pre-load attribute.

    <video controls preload="auto" >
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="video/demo.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="video/demo.ogg"></source>
<source type="video/webm; codecs="vp8, vorbis"" src="video/demo.webm"></source>

Preload will load a percentage of the video as soon as the video tag is rendered.

You may or may not be aware that the poster image can break certain iOS devices and controls must be present for some iOS devices. Additionally, mp4 must be first which you did have, but I am just noting it, because surprise! iOS devices need it first. If you have an html5 version that meets all of this criteria but still does not play on---- iOS devices look into the framerate, the size, and bitrates, baseline or standards profiles, etc. iOS is a picky little POS.

Secondly if you have control over the render of the video file be sure to set key frames every 10 secs or so depending on the length of the movie. This can create several concurrent streams or downloads rather than one. Target bitrate of .8 - 1.6 for SD or smaller video, 1.4 - 2.8 for HD usually works to keep quality and speed without sacrificing too much.

Jared.DAGI
  • 101
  • 6