CODEWITHSUNDEEP
javascriptphpjqueryhtmlvideo
Erick
Erick

Reputation: 119

The best way to play videos on website

According to a Post from w3schools, the best way to play videos on a website is to use HTML5 with fallbacks below:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
Please update your browser. Thanks!
</video>

I have tried to use the code above, and it works on Chrome. Also with IE9. But when my client sent me a feedback, he says the video is not playing on his IE8 browser. So I checked and used IE8 and it does fail. I could tell him to upgrade his browser but that won't work with all users viewing the website.

So I switched to youtube solution, from w3schools' post. Now it's playing on his IE8 (hurray!). But a new problem arise. The video can't be played on his iPad. Possibly he got his youtube app disabled.

I also tried using my iPad. Suprisingly, it didn't worked too (shocking!).

Problem:

What's the very best way to play videos on a website? Maybe not a 100% fail-free solution but would play on most cases.

Criteria:

Upvotes: 6

Views: 5346

Answers (1)

Stefan Steiger
Stefan Steiger

Reputation: 82296

There is no single way to do this cross-browser.

First, there is not a single HTML5-video-codec that works on all browsers

Second, IE8 does not support HTML5, so it's not possible without ready-made plug-ins/players like Flash

Third, you can't just use Flash on all devices, because that doesn't work on the Apple iMonopolyPad & iHegemonyPhone, because apple can't allow it because they a) want to sell Quick-Time video and b) don't wan't a competing adobe-appstore which would be much better than their own on their own platform, because that cuts their profit margins.

Youtube videos are not all converted into non-flash HTML5-video-formats, and HTML5 video might be disabled per youtube/google account.

So, if you want to embed it, you best use a jQuery plugin. Then you can declare a div with a width and a height, and a class, and a data-attribute for the video URL, and jQuery substitutes the div with the appropriate HTML5 video-tag for each browser, or with Flash in IE8.

What comes closest to your wishes is this:

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>

   <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
   <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

A good format-converter for the babylonian codec & resolution plage is this one:
http://www.mirovideoconverter.com/

And use the GNU file (libmagic) utility to check whether your file is actually of the format specified in the file's extension.

Upvotes: 6

Related Questions