SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: HTML5 video tag

  1. #1
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 video tag

    In the HTML5 video code here ...

    Code:
    <video width="320" height="180" controls>
    	<source src="iStock_video.mp4" type="video/mp4">
    	<source src="iStock_video.webm" type="video/webm">
    	<source src="iStock_video.ogv" type="video/ogg">
    </video>
    Is the third "source" line really necessary? Any browser that support ogg would support MP4 and/or WEBM, right?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why do you have the most commonly supported format listed third instead of first?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Stephen:
    the mp4 needs to be listed first to support some older iSomethings which wouldn't bother looking further down the list for what it needs if it wasn't #1. This was fixed in a later version, so now it's just to get so many devices as possible working.
    *edit it was iPads with OSx3... there's a free upgrade to OSx4 which fixed this bug, but you never know who's upgraded.

    Any browser that support ogg would support MP4 and/or WEBM, right?
    Hm, no... FF3.5+ supports ogg but not WebM... FF4+ supports WebM. I'm still on 3.6x because Mozilla did a bonehead thing: they decided on a release-track of every 6 weeks (this alone's not so bad), but with immediate drop of support for the previous, meaning there'll never be another stable version of FF out there that supports my necessary-for-debugging-stuff plugins.

    Some developers at Mozilla realise this and there's talk of having some stable long-term version while the 6-week-release thing continues on its own, like Ubuntu does, but there are also apparently die-hards who don't care if a browser actually works the way users want who are arguing against this. Prolly the same people who removed the Properties option from the context menu "because only nerds need it"... so someone made a plugin to bring it back. Sigh.

    I wonder though if it's still recommended to list the codecs as well in the video code?
    Code:
    <source src="iStock_video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
    (notice the quotes around codecs, those are nested)

    Are you also planning a Flash fallback?

  4. #4
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I have Flash fallback. But for simplicity, I did not include it here in the sample code. I assume that if I omit ogg, users of FF3.5 would get the Flashfall. The problem is that it takes so long to convert from MP4 to OGG (for say hour long video, etc).

    I'm not sure about including the codecs either. I figure that the browsers can figure them out.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The problem is that it takes so long to convert from MP4 to OGG (for say hour long video, etc).
    Hm, my understanding of WebM is that it's basically ogg in a different wrapper.

    But anyway yeah if you're ok with the non-webM, non-mp4 users getting Flash, you could leave ogg out. Though as Stephen said, ogg is very widely supported. Apple's the major holdout here, sticking to H.264 with a passion.

    I figure that the browsers can figure them out.
    It might be just for when you have a few of the same type, but different codecs (like lo-quality for mobiles or crappy-bandwidth users, and then high-quality for hi-speed users...).

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hm, no... FF3.5+ supports ogg but not WebM...
    Also Opera 10.50. 10.60 onward support WebM.

    Quote Originally Posted by Stomme poes View Post
    I wonder though if it's still recommended to list the codecs as well in the video code?
    Yeah.

    Quote Originally Posted by Stomme poes View Post
    Code:
    <source src="iStock_video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
    (notice the quotes around codecs, those are nested)
    You need double quotes for the codecs parameter. Single quotes are invalid and won't be parsed correctly. Which means that you either need single quotes for the whole attribute value or you need to escape the nested quotes as &quot;
    Simon Pieters

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hm, my understanding of WebM is that it's basically ogg in a different wrapper.
    No. "Ogg" is video codec Theora and audio codec Vorbis in wrapper Ogg. "WebM" is video codec VP8 and audio codec Vorbis in wrapper WebM (which is almost identical to Matroska). So the audio codec is the same, but the video codec and wrapper are different.
    Simon Pieters

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I wouldn't bother with including the Ogg version. MP4+WebM+Flash will reach everyone anyway. Firefox 3.5 and Opera 10.50 users should upgrade.
    Simon Pieters

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You need double quotes for the codecs parameter. Single quotes are invalid and won't be parsed correctly. Which means that you either need single quotes for the whole attribute value or you need to escape the nested quotes as &quot;
    Ah, thanks. I noticed Pilgrim did this but thought it was just his quote-nesting preference.

    "Ogg" is video codec Theora and audio codec Vorbis in wrapper Ogg. "WebM" is video codec VP8 and audio codec Vorbis in wrapper WebM (which is almost identical to Matroska). So the audio codec is the same, but the video codec and wrapper are different.
    So the difference between VP3 and VP8 are that great? And yeah I thought WebM wrapper *was* Matroska, so good to know it's a bit different.

    Firefox 3.5 and Opera 10.50 users should upgrade.
    Would love to. Just wish FF5 wasn't bigger, slower, and broken :( but then I'm not watching videos with FF.


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
  •