videojs使用

仅做个人收藏记录。 

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

<script type="text/javascript" src="../js/videojs/video.min.js"></script>

video id="example_video_1" width="100%" height="100%"
                                    class="noShow video-js vjs-default-skin" preload="none">
                                    <!-- <source id="projectVideo" src="images/shipinheji/gtkjjcxxpt/gtkjjcxxpt.m3u8" type="application/x-mpegURL" > -->
                                    <source id="projectVideo" src="" type="video/mp4" />
                                </video>

initVideo("https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4", "../images/carousel.jpg");
function initVideo(v, poster) {
            $("#projectVideo").attr("src", v);
            //初始化视频播放
            var player = videojs('example_video_1', {
                muted: true,
                autoplay: true, //自动播放：true/false
                controls: true,
                fluid: false,	//是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
                loop: false,
                poster: poster, //首屏图片
            }, function onPlayerReady() {
                var player = this;
                $("#example_video_1").removeClass("noShow");
                //在回调函数中，this代表当前播放器，
                //可以调用方法，也可以绑定事件。
                /**
                 * 事件events    绑定事件用on    移除事件用off
                 */
                this.on('play', function () {//开始播放
                    console.log("开始播放")
                    $(".video-js .vjs-big-play-button").css("display", "none")
                    ins.reload({ autoplay: false });
                });
                this.on('pause', function () {//暂停
                    $(".video-js .vjs-big-play-button").css("display", "block")
                    ins.reload({ autoplay: false });
                });
            });
        }