Html5 video. js is used and compatible with all browsers, html5video. js

Html5 video. js is used and compatible with all browsers, html5video. js

I. Prepare materials

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

Ii. Code

Introduce related files:

Paste 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, three video formats are provided, but the problem persists. I will provide a solution later.

Briefly describe some video attributes:

Controls: whether to display the control panel

Autoplay: whether to play automatically

Preload: whether the video is preloaded

Poster: displays invalid video data (PreView)

For more details, see this article: http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html

Iii. Compatibility

Note: The above javascript Code is applicable to IE versions that support html5 elements. For older versions of IE, HTML5shiv can be used to enable browsers that do not support html5. Htnl5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6, IE7, and IE8. These new elements cannot be used as parent nodes to enclose child elements, and they cannot use CSS styles. To apply CSS styles to unknown elements, you only need to execute document. createElement (elementName. This is why html5shiv works. Html5shiv is easy to use. Because IE9 supports html5, you 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 google is no longer accessible. It's really XXXXX,

Then I will simply go down. When you go down, you will find that there are still problems, html5media. min. js file error. Look for it carefully. We didn't find two swf files. As you all know, playing video plug-ins is essential for these two videos. Then let them down.

Really file I have shared on my online drive: http://pan.baidu.com/s/1ntiaul7

It seems that the problem can be solved. When the run is booming, there are still errors:

Analyze the cause and find out that the src attribute of video is required.

Next, we need to take a look at 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"' />   </video> 

A source is left for the sake of insurance.

So there is no problem. Run it and check Chrome and ff ie Safair.

Run the following command on the server to check the parameter (prerequisite: iis must configure the MIME with the extension name of .mp4. The type is video/mpeg)

However, the problem is caused by Google, and safair can be played normally, but FF and IE cannot be played. After checking the information, we know that the MiME type should be video/mp4.