HTML5 video.js use and compatibility with all browsers

Http://www.itnose.net/detail/6076396.html

First, prepare the material

Video.js Download: http://www.videojs.com/

Second, the Code

Introduction of related documents:

　　

Paste in the HTML code:

<video id= "Example_video_1" class= "Video-js" width= "640" height= "410" controls= "Controls" AutoPlay preload= "Auto"  poster= "/images/treatment/reenex2.png" >     <source src= "/content/videos/homepage. MP4 "Type= ' video/mp4; Codecs= "avc1.42e01e, mp4a.40.2" '/>     <source src= '/content/videos/homepage.oggtheora.ogv ' type= ' video/ WebM Codecs= "VP8, Vorbis" '/>     <source src= '/content/videos/homepage.webmhd.webm ' type= ' video/ogg; codecs= ' Theora, Vorbis "'/>   </video>

In order to be compatible with different browsers here, so the three video formats are given, but the problem is still unresolved, I will give a plan later.

Make some simple notes about some of the properties of video:

CONTROLS: Whether the Control panel is displayed

AutoPlay: whether to play automatically

Preload: Whether the video is preloaded

Poster: Display when current video data is invalid (preview)

A more detailed introduction can be viewed in this article: http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html

Iii. resolution of compatibility

Description: The above JavaScript code is used to support the HTML5 element of the IE version, for older versions of IE can be html5shiv to enable browsers that do not support HTML5 HTML new tags. Htnl5shiv main Solution The new elements proposed by HTML5 are not recognized by IE6/IE7/IE8, these new elements cannot wrap child elements as parent nodes, and CSS styles cannot be applied. It is possible to apply CSS styles to unknown elements by simply performing document.createelement (elementname). Html5shiv works based on this. The use of Html5shiv is very simple, because IE9 is supported HTML5, so only need to add the following code in the head:

　　

<script type= "Text/javascript" src= "Http://html5shiv.googlecode.com/svn/trunk/html5media.min.js" ></ Script>

But we all know that the current Google can not access, really xxxxx,

Then I simply down, when you down after you will find that there are still problems, Html5media.min.js file error, carefully find, originally did not find two SWF files, we all know, play video plugin, these two videos are essential. Then put them down again.

The document I have shared in my online disk: HTTP://PAN.BAIDU.COM/S/1NTIAUL7

This seems to solve the problem, when the excitedly run, there are still errors:

　　

Analyze your own reason: the SRC attribute of video is required

And then we're going to need the video tag.

　　

<video id= "Example_video_1" class= "Video-js" width= "640" height= "410" controls= "Controls" AutoPlay preload= "Auto" Src= "/content/videos/step1. MP4 "  poster="/images/treatment/reenex2.png ">    <source src="/content/videos/step1. MP4 "Type= ' video/mp4; Codecs= "avc1.42e01e, mp4a.40.2" '/>   

In order to insure, still left a source.

This is no problem, run up, look at chrome,ff IE Safair no problem

The following server to see (premise: IIS must be configured with the extension. mp4 mime, type: video/mpeg)

But the problem came out again Google, Safair can play normally, but FF and IE can not play, after consulting data, MIME type should be Video/mp4 can

HTML5 video.js use and compatibility with all browsers