Video JS视频播放插件

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

如果不支持 HTML5 则自动使用 Flash 播放器。支持H.264、Theora OGG和Google WebM格式。它没有依赖任何JavaScript框架，支持全屏播放和音量控制。外观皮肤完全采用CSS控制，没有用到任何图片。

使用方法：

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

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

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

<script>
videojs.options.flash.swf = "video/video-js.swf";
</script>

3.html代码

poster="**"
属性是播放初始图。可使用三种视频格式，根据所需要格式选择对应的。

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="video/oceans-clip.png"
data-setup="{}">
<source src="video/oceans-clip.mp4" type='video/mp4' />
<source src="video/oceans-clip.webm" type='video/webm' />
<source src="video/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="video/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="video/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

4.设置自动播放（需要自动播放时设置）

设置自动播放将下面代码加到html中代码后面

<pre name="code" class="html"><script type="text/javascript">
var myPlayer = videojs('demo1');
videojs("demo1").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>

iphone6全屏效果如下：



竖屏如下：