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

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

Let's just get started.

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.

In this way, you can write it out and hope to save some time for everyone. As a programmer, you all know ......

Does IE9 support html5 video?

You may be using the webkit kernel. In the impression, this browser is dual-core. IE9 does not support video tags. This problem has been improved only when ie10. But there are also solutions to download a video. javascript is enough. This is a solution for HTML5 video support for earlier versions of IE. When writing code, you can use standard HTML5 writing, in IE9 and earlier browsers, this JS will automatically generate a Flash Player to simulate the HTML5 player effect. This eliminates the need for compatibility with html5 video tags ~~~

Your browser does not support HTML5 VIDEO

Open tool-IE option-delete Cookies-delete files-OK.