HTML5 upload video does not play and is compatible with the workaround

One, the video cannot play the reason analysis

1, the path is not correct

<video width= "100%" height= "100%" controls= "Controls" >
<source src= "Images/apply.mp4" type= "Video/mp4" ></source>
</video>

No slash in front of images, use relative path, do not use absolute path

2, the video format is not correct

Workaround: Currently, the video element supports three formats:
Format IE Firefox Opera Chrome Safari
Ogg no 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No no 5.0+ 3.0+
WebM no 4.0+ 10.6+ 6.0+ No

OGG = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding

WebM = WebM file with VP8 video encoding and Vorbis audio encoding

Note: The format must conform to the above three detailed requirements, such as MPEG 4, which must be H + video and AAC audio.

3. MP4, OGG, WEBM related types are not registered in the mime of IIS, which causes IIS to not recognize

Workaround: To register MP4, OGG, WEBM types in IIS, the following are examples of MP4, OGG and WEBM, and so on:

1. Double-click the MIME type icon in IIS

650) this.width=650; "alt=" 2011062922434432.png "src=" http://pic002.cnblogs.com/images/2011/32222/ 2011062922434432.png "/>

2, right-"Add new types that IIS does not recognize

650) this.width=650; "alt=" 2011062922460374.png "src=" http://pic002.cnblogs.com/images/2011/32222/ 2011062922460374.png "/>

3. Add the extension and type ID of the new type

650) this.width=650; "alt=" 2011062922473089.png "src=" http://pic002.cnblogs.com/images/2011/32222/ 2011062922473089.png "/>

Note: to show. MP4, for example, if you want to make video tags compatible with more browsers, you need to add the following types to MIME

Extended Name	Type
. mp4	Video/mp4
. OGV	Video/ogg
. webm	Video/webm

Second, compatible solutions

1, in this case, if the video format is correct, most of the browser compatibility results we are satisfied, but IE678 does not support it, and other people's users in China is still a very large group, we must think of another solution to support them:

The code is as follows:

<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width= "624" height= "351" style= "Margin-top: -10px;margin-left: -8px; "id=" FLVPlayer1 ">
<param name=" movie "value=" flvplayer_progressive.swf "/>
<param name= "Quality" value= "High"/>
<param name= "wmode" value= "opaque"/>
<param name= "scale" Value= "Noscale"/>
<param name= "salign" value= "LT"/>
<param name= "flashvars" value= "&amp; mm_componentversion=1&amp;skinname=public/swf/clear_skin_3&amp;streamname=public/video/test&amp; Autoplay=false&amp;autorewind=false "/>
<param name=" swfversion "value=" 8,0,0,0 "/>
<!--this The param tag prompts you to download the latest version of Flash Player using Flash Player 6.0 r65 and later. If you don't want the user to see the prompt, delete it. --
<param name= "Expressinstall" value= "expressinstall.swf"/>
</object>

This introduces some files, in addition to the FLV format of the video, there are several swf or JS files, are generated with the DW software, do not want to study <object></object> tag friends to the DW software generation on the line, if you can skillfully fusion

These two pieces of code will be able to get the ultimate code compatible with all major browsers.

So we can do this:

Using jquery to determine whether the browser is IE (do not judge the specific version of IE, because the server is likely to be the cause of the high version of IE will not pass, ie all with <object></object> tags), according to the version load different tags, the code is as follows:

The code is as follows:

<script>
if ($.browser.msie) {
document.write (' <object classid= ' clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 "width=" 624 "height=" 351 "style=" Margin-top: -10px;margin-left: -8px; "id=" FLVPlayer1 ">" +
' <param name= ' movie "value=" flvplayer_progressive.swf "/> ' +
' <param name= ' quality "value=" high "/> ' +
' <param name= ' wmode ' value= ' opaque '/> ' +
' <param name= ' scale "value=" Noscale "/> ' +
' <param name= ' salign "value=" LT "/> ' +
' <param name= ' flashvars "value=" &amp; mm_componentversion=1&amp;skinname=public/swf/clear_skin_3&amp;streamname=public/video/test&amp; Autoplay=false&amp;autorewind=false "/> ' +
' <param name= ' swfversion ' value= ' 8,0,0,0 '/> ' +
' <!--this param tag prompts users to download the latest version of Flash Player using Flash Player 6.0 r65 and later. If you don't want the user to see the prompt, delete it. --' +
' <param name= ' expressinstall ' value= ' expressinstall.swf '/> ' +
' </object> ');
}else{
document.write (' <video width= ' 602px "height=" 345px "controls=" Controls "> ' +
' <source src= ' Public/video/test.mp4 "type=" Video/mp4 "></source> ' +
' <source src= ' Public/video/test.ogg "type=" Video/ogg "></source> ' +
' Your browser does not support the video tag ' +
' </video> ');
}
</script>

Don't forget to introduce jquery files before writing this code

To this end, you can write HTML video code that is compatible with all browsers.

2. JS Library

Html5media is an all-in-one way to make these two tags fully compatible with the old version of IE browser. JavaScript class Library.

Html5media is a very strong JavaScript class library that does not depend on any JavaScript Framework . After using Html5media, when the browser does not support HTML5 , it will automatically switch to flash mode flowplayer player . Although, there are many web players, but the processing code is not concise.

use Html5media to enable IE6/7/8 browser to support HTML5 audio and video tags

1, first in the head section of the page to add the following script

<script src= "Http://api.html5media.info/1.1.6/html5media.min.js" ></script>

You can only load this JS script in the old version of IE by using the IE conditional annotation method.

2. Then you can add audio or video to it.

This article is from the "Yuhuifei" blog, make sure to keep this source http://4745272.blog.51cto.com/4735272/1909190

HTML5 upload video does not play and is compatible with the workaround