前端m3u8格式视频播放

video-js.min.css

video.min.js

videojs-contrib-hls.js

前人栽树后人乘凉。首先引入这三个js

<video id="my-video" width=960 height=600 class="video-js vjs-default-skin" controls>
</video>

然后写入视频属性

var options={
        playbackRates: [0.5,1,1.25,1.5,1.75,2],
        controlBar: {
            volumePanel: {
                inline: false //默认是true,横着的
            },
            children: [
                {name: 'playToggle'}, // 播放按钮
                {name: 'currentTimeDisplay'}, // 当前已播放时间
                {name: 'progressControl'}, // 播放进度条
                {name: 'durationDisplay'}, // 总时间
                { // 倍数播放
                    name: 'playbackRateMenuButton',
                    'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                },
                {
                    name: 'volumePanel', // 音量控制
                    inline: false, // 不使用水平方式
                },
                {name: 'FullscreenToggle'} // 全屏
            ]
        },
        sources: [//视频播放源，建议本地
            {
                src: '',
                type: "application/x-mpegURL"
            },
        ]
    };

初始化视频并进行监测

var playerVideo = videojs("my-video", options, function onPlayerReady(param) {
            this.on('pause', function () {
                console.log('暂停播放');
            });
            this.on('ended', function() {//播放结束
                console.log("播放结束");
            });
             this.on('waiting', function () {
                console.log('等待加载');
             })
            this.on('play', function () {
                console.log('开始播放');
            });
            this.on("ratechange", function(){
                 console.log("播放速率改变")
             });
            this.on("stalled",function(){
                console.log("网速异常");
             })
        });

 在检测里面调用对应的逻辑函数。

获取当前视频播放时间：

playerVideo.currentTime()

获取当前视频长度：

playerVideo.duration()

隐藏视频播放进度条：

        .video-js .vjs-control-bar{ /* 控制条默认显示 */
            display: flex;
        }
        .video-js .vjs-progress-control{
            display:none;
        }
        .video-js .vjs-time-control{display:none;}
        .video-js .vjs-remaining-time{display: none;}

影响后防止拖动视频等操作。

如果想遮挡住该页面后暂停视频或调用函数请看另下篇文章。