how to use html5 videos in our website

How to use HTML5 to play video files on your webpage

how to use html5 videos in our website

Using HTML5 video, you can add and control video content on your webpages, without requiring external controls or plug-ins.

Playing video on your webpage

Video has become a staple on the web, with content ranging from playful cats to serious documentation. This series shows you how to use HTML5 to add a video player to your webpage, without requiring third-party controls or plug-ins. You’ll need a modern browser that supports HTML5 video to fully appreciate the examples, but you’ll also see how to use an embedded third-party player for compatibility with older browsers.

The examples and images are presented using Windows Internet Explorer 9 and Internet Explorer 10, but we’ll make note of any differences with other browsers.

Note  If you are developing on an intranet and you have rendering issues for HTML5 video and other features, you can add <meta http-equiv-“X-UA-Compatible” content=”IE=edge”/> to the “<head>” block of a webpage for testing. This forces Windows Internet Explorer to use the latest standards. If you prefer, configure your web development server to send a meta http-equiv-“X-UA-Compatible” header with IE=9 or IE=10 instead. For more info about document compatibility, see Defining Document Compatibility.

Serving audio and video content for your webpage

The main difference between browsers is most likely their support of different video formats. HTML5 video is an emerging standard and isn’t tied to any one video format. Internet Explorer primarily supports H.264 video. For more info about HTML5 video format support in Internet Explorer, see the IEBlog posts titled HTML5 Video, Follow up on HTML5 video in IE9, and Another follow up on HTML5 video in IE9.

Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won’t play. Internet Explorer 9 supports MP3 audio and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project. The following table shows the required settings for your web server to host these files correctly.

 

<video width=”400″ controls>
<source src=”mov_bbb.mp4″ type=”video/mp4″>
<source src=”mov_bbb.ogg” type=”video/ogg”>
Your browser does not support HTML5 video.
</video>

 

Media file to serve Extension setting Mime type setting
Audio mp3 mp3 audio/mpeg
Audio mp4 m4a audio/mp4
Audio webm webm audio/webm
Video mp4 (H.264) mp4 video/mp4
Video webm webm video/webm

766 total views, 1 views today

Related Posts

Loading Facebook Comments ...

2 Comments. Leave new

Hi,

If you require any help from our side on design and blogging sites. Please free to contact us. We also do the freelancing work.
http://www.freelancingdesign.com/contact-us/

Thanks!

Reply
calabriatechnology
March 25, 2015 9:50 pm

I really enjoy the blog post.Thanks Again. Really Great.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins