关于利用video.js解决网页插入视频不能播放不兼容的办法步骤

第一次写博客，内心有些小忐忑，博客内容主要是工做中遇到的问题，以及解决以后的一些心得体会，也借鉴了网络上的资料，若有不足，欢迎指正~

写这篇文章的初衷是由于老板想要在公司网站加一个宣传视频，原本以为很简单，HTML5嘛，一个video标签轻松搞定！谁知道，写完传到服务器以后才发现，在PC端视频根本播放不了，可是用手机就能够打开，是否是很奇怪。觉得是视频格式的问题，因而下载了格式工厂，各类转格式，mp四、flv、avi……全都试个遍，仍是不行。

后来在网上发现几篇文章，而后就进行总结，通过各类调试，终于解决了！下面是具体步骤。

言归正传，这篇博客是关于网页中插入视频的解决办法，能够兼容IE、Chrome、火狐、360等浏览器。固然网络上有不少种方法，本文主要讲利用video.js插入视频。

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持状况，若是不支持 HTML5 则自动使用 Flash 播放器。

具体步骤：

1.在页面中引用video-js.css样式文件和video.js。

2.设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件。

3.在html中写video标签，插入视频。

可以使用三种视频格式，根据所须要格式选择对应的。

4.若是IE不支持的话，能够加入下面这段代码，意思是：若是是IE浏览器就将视频替换为传统的以FLASH形式播放。

5.html5media.js 让浏览器兼容<Video><Audio> 标签，一行代码搞定。不过，本人用了这个以后没有解决，因此仍是用的video.js，这里发上来跟你们分享一下。

引入js：

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

插入视频：

<video src="video.mp4" width="320" height="200" controls preload></video>

最后要注意一点，虽然前台支持3种格式，可是后台服务器并不必定都支持哦，因此我选择的是mp4格式，编码格式是h264，通常都支持。可是这里有遇到了一个小难题，传到服务器之后找不到mp4这个文件，百度一下才知道是后台服务器的设置问题。

出现404报错说明mp4格式文件是服务器没法识别的，其实，这是没有在iis中将相应的MIME类型进行设置的缘由。那该怎样设置MIME类型呢？

开启mp4文件的话，须要在 “Internet信息(IIS)管理器”中右击须要更改的网站或目录，能够打开形以下图的窗口(我右击的是文件夹而不是站点，因此您右击站点的话打开的 或许比个人选项卡多，无论怎样您点击HTTP头就能够打开怎样的窗口了)：

服务器增长mp4格式的MIME 类型映射设置的具体步骤是：
“开始” > “控制面板” > “管理工具” >“Internet 信息服务（IIS管理器）”，找到您的网站，右击 > “属性” > “HTTP头” > “MIME类型” > “新建”，在“扩展名”框内输入“.mp4”，“MIME类型”框中输入“application/octet-stream”，而后肯定便可。“MIME类型”只是一个描述，并不是非得输入“flv-application/octet-stream”。

服务器增长flv格式的MIME 类型映射设置的具体步骤是：
“开始” > “控制面板” > “管理工具” >“Internet 信息服务（IIS管理器）”，找到您的网站，右击 > “属性” > “HTTP头” > “MIME类型” > “新建”，在“扩展名”框内输入“.flv”，“MIME类型”框中输入“flv-application/octet-stream”，而后肯定便可。“MIME类型”只是一个描述，并不是非得输入“flv-application/octet-stream”。

MIME类型就是设定某种扩 展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以 及一些媒体文件打开方式。

好了，Java我也不太懂，后面这段彻底是借花献佛，从网上摘抄过来的。不事后台这样设置后，视频能播放啦！哈哈，开心~

以上就是这篇博客的所有内容啦，第一次写博客，经验不足，若是有错误的地方，欢迎你们指正，固然能给你们提供到帮助的话，我也很开心哒~