1.头部文件
<head>
<title>Video.js | HTML5 Video Player</title>
<!--兼容低版本浏览器的H5插件-->
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<!--videjs样式部分-->
<link href="http://vjs.zencdn.net/6.10/video-js.min.css" rel="stylesheet">
<!--videjs的js部分-->
<script src="http://vjs.zencdn.net/6.10/video.min.js"></script>
<!--播放按钮居中显示-->
<style type="text/css">
.video-js .vjs-big-play-button{
left: 50%;
margin-left: -1.5em;
top: 50%;
margin-top: -0.75em;
}
</style>
</head>2.body里的文件
<!--video进行宽高width、height和控制controls和默认图片poster和data-setup(必须)的初始设置-->
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
<!--引入视屏的三种格式(video播放对视屏格式有要求)-->
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>3.效果
(1)Google
(2) Firefox
(3)360极速
(4)360里的兼容模式
①IE7 ，IE8
②IE9
③IE10
4.几点说明
(1)video是H5新标签，若想在低版本浏览器中使用必须对标签兼容处理html5media.min.js;
(2)官方地址：http://videojs.com
(3)推荐博客：https://www.cnblogs.com/afrog/p/6689179.html