HTML5 Video

JavaScript
1

I am looking for a way to integrate video into a website using HTML5. This because i’d want the video to be playable on the iPad and iPhone.

So I’ve been playing with a lot of videoscripts lately, but all seem to have their flaws. For example, i was using the popular JWplayer, but that one is so CPU intensive that even my Corei7 has trouble handling a page containing three video’s.

I am now stuck, so perhaps you guys could help me out. The things I am looking for.

  • HTML5 or at least HTML5 fallback
  • NO player, so no buttons also not when hovering.
  • Autoplay
  • Loop
  • Not using to mutch power.

Thank you in advance!

2

If you’re not presenting any controls to the user, it might just be easier to build the thing yourself. Have you seen Video for Everybody? Or the relevant chapter from [url=http://diveinto.html5doctor.com/video.html]Dive Into HTML5?

If you only cared about browsers with native support for <video> and H.264, your markup could be as simple as this:


<video width="100" height="100" src="yourVideo.mp4" autoplay loop />

iOS doesn’t support the “loop” attribute, so you’d have to do some JavaScripting to make it work:


yourVideo.addEventListener('ended', function () {
    yourVideo.currentTime = 0.1;
    yourVideo.play();
}, false);
3

Thanks for the reply.

I was looking into all kind of scripts and have been working on this for days. But you were right, the regular HTML 5 tags were all i needed… I just overlooked and never thought it would be this easy. Wasted a lot of time on this… But it’s working!

Firefox didn’t loop either. I solved that by adding onended=“this.play()”. Is this enough for iOS as well or do i need your function?

Also I am now using different formats:

<source src=“homefin.mp4” type=“video/mp4” />
<source src=“homefiniphone.mp4” type=“video/mp4” />
<source src=“homefin.m4v” type=“video/mv4” />
<source src=“homefin.webm” type=“video/webm” />
<source src=“homefin.ogv” type=“video/ogv” />
<source src=“homefin.ogg” type=“video/ogg” />

Are m4v and ogv supported? And will the iPhone find the second video, or does it just open the first since that’s an mp4 as well?

4
  1. I had trouble making “onended” work in Firefox 3.6, but using addEventListener seemed to do the trick.
  2. I don’t actually have an iOS device, so I can’t test whether or not you need to set the currentTime back to 0.1; it might be needed, it might not.
  3. Also, forgot to put this in the original response, but iOS does not support the autoplay attribute, either. There are probably some workarounds, but because I don’t have one, again, I can’t really say what you’d have to do to make it work.
  4. I believe that iPhone will just grab the first mp4 it sees (and, in fact, because of a bug, this mp4 has to be the first <source> element)
  5. I think m4v will work, but my understanding is that if a browser supports m4v, it will also support mp4–so the m4v <source> is unnecessary (not sure about this, though).
  6. I think the “.ogv” videos need to/should be sent with a MIME type of “video/ogg” instead of “video/ogv” (again, possibly wrong and probably won’t make any difference… I guess I’m just nitpicking at this point).
  7. I’m not sure how different browsers handle this, but including the codec information supposedly stops them from downloading files that they don’t support. So putting type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”’ should improve performance (note the single quotes and double quotes).

So your HTML might look something like this:


<video id="homefin" width="100" height="100" autoplay loop>
    <source src="homefin.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="homefin.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="homefin.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <!-- Note that there is no fallback for browsers that don't support the <video> tag! -->
</video>

…and then your JavaScript would look something like this:


var homefin = document.getElementById('homefin');

/*
 * if you wanted to fix autoplay in iOS
 * (which is disabled by default for a reason),
 * then that fix would probably go here
 */

if (homefin.loop === undefined) {
    homefin.addEventListener('ended', function () {
        homefin.play();
    }, false);
}