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!).
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:
Video embed benefits your overall search engine optimization, as your video will play faster and have better quality when hosted on a third-party server. Additionally, since different browsers support different video formats, you'd have to convert your video files for each browser and upload and host multiple videos.
HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size. Example: In this example, we are using <video> tag to add video into the web page.
It depends on what you're using to embed your videos, how many other elements you have on your page, the optimization of your site as a whole, as well as a number of other factors. If these are implemented properly, video should not influence your page loading speed.
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&image=__POSTER__.JPG&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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With