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

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

下载地址：https://micuu.com/data/upload/avatar/20200730/15cd7d681e980699913eb53cfddea9fa.zip

head引用

<link href="__STATIC__/videojs/video-js.css" rel="stylesheet" />
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <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());
        }