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:

• Autoplay
• Cross-browser (including Android's default browser)
• No to ready-made plug-ins/players
• Large video file (50MB+)

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:

• Autoplay
• Cross-browser (including Android's default browser)
• No to ready-made plug-ins/players
• Large video file (50MB+)

• javascript
• php
• jquery
• html
• video

Share Improve this question Follow edited Jul 30, 2014 at 10:07 Erick asked Jul 30, 2014 at 9:30 ErickErick 11922 silver badges99 bronze badges 5

• I don't have my iPad here so can't test this but have you read this? : satsig/images/youtube-on-ipad.htm Its quite an old post but seems a simple fix if it works. – Izion Commented Jul 30, 2014 at 9:34
• VideoJS – nietonfir Commented Jul 30, 2014 at 9:36
• @Izion I also have tried that. Adding 'http:' instead of '//www.youtube.'. Produced same output. – Erick Commented Jul 30, 2014 at 10:03
• @nietonfir tried that one too. – Erick Commented Jul 30, 2014 at 10:05
• 1 @Erick Works like a charm. Just used it today in a microsite with different versions (mobile/streaming version with ~15MB and a full HD desktop one with ~40MB, both H264) of a video. No problems on most browsers (IE7+, FF, Chrome, iOS, Android, …). Autoplay doesn't work on mobile obviously, but that's a browser feature to prevent data hogs - you need a user initiated event there. And concerning your iPad issue: the video NEEDS to have a proper ratio + supported encoding, else it just won't play. Maybe that helps … – nietonfir Commented Jul 30, 2014 at 22:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 peting 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 es 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./

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