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

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

写这篇文章的初衷是因为老板想要在公司网站加一个宣传视频，本来觉得很简单，HTML5嘛，一个video标签轻松搞定！谁知道，写完传到服务器之后才发现，在PC端视频根本播放不了，但是用手机就可以打开，是不是很奇怪。以为是视频格式的问题，于是下载了格式工厂，各种转格式，mp4、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：

插入视频：

最后要注意一点，虽然前台支持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我也不太懂，后面这段完全是借花献佛，从网上摘抄过来的。不过后台这样设置后，视频能播放啦！哈哈，开心~

以上就是这篇博客的全部内容啦，第一次写博客，经验不足，如果有错误的地方，欢迎大家指正，当然能给大家提供到帮助的话，我也很开心哒~