HTML5 video and browser compatibility

HTML5 video and browser compatibility

Now to use video on browser is quite easy, we don't want any flash player any more, simply we can use <vidoe> tag and set the video path with src and done.

Video tag attributes:

  • autoplay : "autoplay" or "" (empty string) [Instructs the UA to automatically begin playback of the video as soon as it can do so without stopping.]
  • preload : "none" or "metadata" or "auto" or "" (empty string)
  • controls : "controls" or "" (empty string)
  • loop: "loop" or "" (empty string), loop if you need to repeate.
  • poster : Image URL to show while no video data is available
  • height : non-negative integer in pixels
  • width : non-negative integer in pixels
  • muted = "muted" or "" (empty string)
  • src : video URL

Example 1: Simple video player with HTML5

<video controls  src="http://video-js.zencoder.com/oceans-clip.ogv">
       Text to show if browser is not supporting HTML5 video tag
</video>

Text will appear if your brwoser is not supporting the html5 video support.

To check where your browser is supporting html5 video or not.

Example 2: With alternative sources

<video controls>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" 
               type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" 
               type='video/webm; codecs="vp8, vorbis"' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" 
               type='video/ogg; codecs="theora, vorbis"' />
   <p>Your user agent does not support the HTML5 Video element.</p>
</video>

If your browser support any of the type that will be dipsplyed other wise the message in <p>..</p> tag.

Example 3: Suppose user browser is not supporting any of the source type then? It's not good to show the message but some way to so the video any case. Check this, I will show the video via flash player when your all HTML5 will be failed.

<video controls preload="auto" autoplay="UA" >
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" 
          type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" 
           type='video/webm; codecs="vp8, vorbis"' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" 
           type='video/ogg; codecs="theora, vorbis"' />

  <!-- Flash Fallback. Use any flash video player here. -->
  <!-- Make sure to keep the vjs-flash-fallback class. -->
  <object class="vjs-flash-fallback" width="640" height="264" 
    type="application/x-shockwave-flash"       
    data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
    <param name="movie" 
      value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
       <param name="flashvars" 
         value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", 
             {"url": "http://video-js.zencoder.com/oceans-clip.mp4",
             "autoPlay":false,"autoBuffering":true}]}' />
    <!-- Image Fallback. Typically the same as the poster image. -->
    <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" 
              height="264" alt="Poster Image" 
              title="No video playback capabilities." />
  </object>
</video>
Myghty .Net developer
  • html
By Myghty On 30 Dec, 12  Viewed: 1,237

Other blogs you may like

MVC HTML Paging Helper with search and sort

MVC Search Sort and Paging is common feature we need to use, so let's write the HTML Paging Helper for our project, which will work faster than anyother build-in costum grid system because they contain many other features we don't need for our application and don't support many features we want. In... By Ali Adravi   On 07 May 2018  Viewed: 1,695

3 Excellent HTML5 Boilerplates for Quick Development

If you have just started out with HTML5, then boilerplates help you reason out with the framework and help create a professional front end and a robust website. This open source project was created in order to make you HTML5 ready, in case you have just started out. You can directly download and... By Deepa Ranganathan   On 01 Jun 2015  Viewed: 276

Use XSLT to create menu from database

In some situations we need to create website menu from database, say our application have ability to create pages so that must also need to have a menu item to go to that page. So how to create menu with all those nice CSS and other settings, I think XSLT is best to use in these... By Hamden   On 16 Mar 2013  Viewed: 1,107

Horiontal menu by simple css

When we need a new menu we mostly depend on designers while you can create horzontal menu easily by writing some simple css, let's see how easy it is <style> ul.menu { list-style-type: none; margin: 0; padding: 0; ... By Flower   On 31 Dec 2012  Viewed: 390

Social media sharing buttons without javascript

Social Media Sharing Buttons Without JavaScript I was looking for code to add social media buttons to share my blog on different sites like facebook, twitter, google plus, tumbler and email, I search many websites but could not found any good article which can help to add these buttons without... By Hamden   On 29 Dec 2014  Viewed: 2,083