专注于前端开发
我们一直未放弃

video.js视频播放插件,常用事件方法及实例演示

插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )

使用方法

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

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

设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件,注意:支持ie低版本才考虑此方案。

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

HTML代码

<video id="my-video" class="video-js" controls preload="auto" width="320" height="140" x5-playsinline playsinline webkit-playsinline="true" poster="images/1.jpg" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <p class="vjs-no-js">视频格式不支持!</p>
    </video>

注意:x5-playsinline playsinline webkit-playsinline=”true” 此属性为让播放时候视频不弹出播放,如需要弹出播放请删除此代码。

JS代码

var myPlayer = videojs('my-video');
videojs("my-video").ready(function () {
    var myPlayer = this;
    myPlayer.play();
});

添加绑定事件

videojs("my-video").ready(function () {
            var myPlayer = this;
            myPlayer.play();
            //暂停事件监听
            this.on('pause', function () {
            });
            //播放事件监听
            this.on('play', function () {
            });
        });

点击查看实例

卓迅设计-web前端开发-前端技术开发 » video.js视频播放插件,常用事件方法及实例演示

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址