HTML5 Video Supporting Browsers – Beginners Guide – 015

HTML5 Video Supporting Browsers – Beginners Guide – 015

HTML5 Video Supporting Browsers – Beginners Guide – 015.

This tutorial is connected from the previous HTML5 tutorial, the “HTML5 Video Attributes“.

This tutorial will provide a flash fallback to your HTML5 Video and it is really nice and easy. We can call this Video for Everybody. We are going to access the site http://sandbox.thewikies.com/vfe-generator/.

This is a website where you can provide your video link from your file and paste it on their specific fields like MP4, WebM and Ogg. After you have placed your video link from file, you can also put a poster image as well as giving it a title.

You can also adjust your video’s resolution on this website and you can select the embed type for your HTML5 video. Here’s the interface of the website:

First, follow my example image for the adjustments of your HTML5 Video.

First, I pasted the source file of our MP4 and WebM video to its specified field. Notice that I left the Ogg Video field in blank because we do not have that type of video.

Next, we removed the poster image and change the fallback title of our HTML5 Video. Also, we adjusted our resolution and chose the default embed type HTML5+Flash.

After changing the properties, you can now copy the provided code at the bottom of the site and replace it on your recent video tag code. Take note that you don’t have to copy the bottom paragraph tag provided by the site.

[html5]

&lt;video controls="controls" width="500" height="500"&gt;&lt;video controls="controls" width="500" height="500"&gt; &lt;source src=video/IMG_0463.mov type=video/mp4 /&gt; &lt;source src=video/IMG_0463.webm type=video/webm /&gt; <a href="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf</a> &lt;/video&gt;

[/html5]

Try to check your new video tag code if it works especially on different browsers. This Video for Everybody let’s your HTML5 video coding faster because you don’t have to type for the specifc attributes!

Here’s the result of my new modified video tag:

It is good and running smoothly!

This ends on our tutorial, HTML5 Video Supporting Browsers – Beginners Guide.

On our next tutorial, we will be discussing about “How to Play Audio with HTML5”. Stay tuned webbies!

For questions or any other concerns or thesis/capstone creation with documentation, you can contact me through the following:

<div class="wpInsert wpInsertInPostAd wpInsertMiddle">
<p>E-Mail: [email protected]</p>
<p>Facebook: <a href="https://www.facebook.com/kirk.lavapiez">facebook.com/kirk.lavapiez</a></p>
<p>Contact No.: +639771069640</p>
<p>Ian Hero L. Lavapiez</p>
<p>BSIT Graduate, soon to be MIT.</p>
<p>System Analyst and Developer</p>
<p>Related topic(s) that you may like:</p>
<ul>
<li><a href="//itsourcecode.com/2017/06/html5-video-attributes-beginners-guide/"><b>HTML5 Video Attributes</b></a></li>
<li><a href="//itsourcecode.com/2017/06/html5-video-compatibility/"><b>HTML5 Video Compatibility</b></a></li>
</ul>
</div>

Related PHP Projects

• Html5 Video Compatibility
• Html5 Video Tag Beginners Guide
• Html5 Video Attributes Beginners Guide
• Html5 Shiv Beginners Guide
• New Semantic Elements Html5 Beginners
• Html5 Boilerplate Beginners Guide