SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: HTML5 Video

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 Video

    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. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 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:

    HTML Code:
    <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:

    Code JavaScript:
    yourVideo.addEventListener('ended', function () {
        yourVideo.currentTime = 0.1;
        yourVideo.play();
    }, false);
    Last edited by sdleihssirhc; Oct 19, 2011 at 11:51. Reason: added stuff about loop
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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:

    Code JavaScript:
    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);
    }
    I'm the web overlord for Graphic Business Systems


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •