video.js视频播放插件的实例及下载，官方文档

video.js视频播放插件的实例及下载，官方文档
videojs是一款功能强大的视频播放插件，相信原生的video标签不满足生产中的需要，下面是给大家总结了插件最日常的一些方法提供大家参考

[![](https://micuu.com/data/upload/avatar/20200730/15cd7d681e980699913eb53cfddea9fa.zip)]()下载地址：https://micuu.com/data/upload/avatar/20200730/15cd7d681e980699913eb53cfddea9fa.zip

> head引用

```
<link href="__STATIC__/videojs/video-js.css" rel="stylesheet" />

<script src="__STATIC__/videojs/videojs-ie8.min.js"></script>
```

> 页脚引用

```
<script src="__STATIC__/videojs/video.js"></script>
```
> 功能实现

```

<video
                                     id="my-video"
                                     class="video-js vjs-big-play-centered"
                                     controls
                                     preload="auto"
                                     width="640"
                                     height="264"
                                     poster="{$video.img.0}"
                                     data-setup="{}"
                             >
                                 <source src="<?=$video['url'][0]?>" type="video/mp4" />
                                 <p class="vjs-no-js">
                                     To view this video please enable JavaScript, and consider upgrading to a
                                     web browser that
                                     <a href="https://videojs.com/html5-video-support/" target="_blank"
                                     >supports HTML5 video</a
                                     >
                                 </p>
                             </video>
```

详解： 
> vjs-big-play-centered 控制按钮居中显示
> poster封面

事件监听
```
<script>
        var myvideo=videojs("myvideo");

myvideo.on("ended",function(){
            console.log("视频播放结束");
        })

myvideo.on("pause",function(){
            console.log("点击暂停");
        })

myvideo.on("play",function(){
            console.log("点击播放");
        })

myvideo.on("volumechange",function(){
            console.log("声音改变");
        })

myvideo.on("timeupdate",function(){
            console.log("视频播放中");
        })

myvideo.on("seeked",function(){
            console.log("视频跳转结束");
        })

myvideo.on("seeking",function(){
            console.log("视频跳转中");
        })

</script>
```

获取宽高等

```
var myvideo=videojs("myvideo");

//获取宽高
        console.log(myvideo.width());
        console.log(myvideo.height());

myvideo.width(300);
        myvideo.height(200);

console.log(myvideo.width());
        console.log(myvideo.height());
```

其他方法

```
 var myvideo=videojs("myvideo");

//100秒处开始播放
        myvideo.currentTime(100);

myvideo.ready(function(){
            //缓冲
            console.log(this.buffered());
        });

//绑定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }
		var myvideo=videojs("myvideo");

//获取声音
        console.log(myvideo.volume());

//设置声音
        myvideo.volume(.5);

console.log(myvideo.volume());
		
		 var myvideo=videojs("myvideo");

//100秒处开始播放
        myvideo.currentTime(100);

myvideo.ready(function(){
            //在ready中显示NaN
            console.log(this.duration());
        });

//绑定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }

```

注:原创不易,转载请注明出处( https://micuu.com/new/819.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。