CODEWITHSUNDEEP
htmlvideomodernizrfallback
user1470516
user1470516

Reputation: 21

Modernizr vs W3Schools recomendation for Video fallback

We were looking for a solid fallback solution for video. We want to create an app in HTML5 for clients that will access the app on mobile devices, but we also know a significant amount of our Government clients will be using older desktop browsers and are not able to upgrade them.

I've been looking at Modernizr and Video for Everybody solutions, and then I came across the W3Schools recommendation that simply has this:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
    <object data="movie.mp4" width="320" height="240">
      <embed src="movie.swf" width="320" height="240">
    </object> 
  </video>

Is there any advantage to using Modernizr or Video for Everybody over the simple W3Schools recommendation in regards to video fallback?

Upvotes: 1

Views: 594

Answers (1)

astorije
astorije

Reputation: 2707

I reckon you found your example here.

First of all, I just want to clarify something: W3Schools has nothing to do with W3C whatsoever. Also, HTML5 is currently a Candidate Recommendation and is not expected to be a W3C Recommendation before a while, as the transition to a Proposed Recommendation is expected no earlier than 1 September 2014.

To my knowledge, W3C does not provide a recommended way to embed video because codec choices are made by the browsers, the spec tends to be agnostic about implementation details. Plus, if a browser updates its codec support, W3C would have to change its spec, which fortunately does not happen.

Now, to answer your question, if you look at the code given by Video for Everybody (which is also Modernizr's recommended way of embedding videos), you'll see:

<video width="640" height="360" controls>
  <source src="__VIDEO__.MP4"  type="video/mp4" />
  <source src="__VIDEO__.OGV"  type="video/ogg" />
  <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
    <param name="movie" value="__FLASH__.SWF" />
    <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
  </object>
</video>

As you can see, it is very close from what you gave as an example. The big difference we can notice is the lack of WebM, but when you look at the browser support of video formats, I think this can be explained by:

  • if a browser supports WebM, it also supports Theora (the OGG line of the snippet) and/or H.264
  • Theora/H.264 was supported before WebM, so even an old browser version would play your video
  • on a pragmatic note... it makes one less file to maintain (i.e. less disk storage needed, less time wasted if the content of the video changes, ...)

Plus, and this derives from the first two notes, if your browser doesn't support Theora or H.264, and you want to maximize the compatibility, you better rely on Flash support than WebM support (according that you have Flash installed).

A few links you (or whoever interested in the topic) might want to go across:

I hope this helps.

For those who like to waste their time AND to watch science fiction, you might want to look through the HTML5 spec for some easter eggs... :-)

Upvotes: 1

Related Questions