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全屏效果如下：

竖屏如下：

Video JS视频播放插件

猜你喜欢