使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频

videojs是一个播放视频的js库，可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件
m3u8是一个文本文件(播放列表文件)，里面的内容就是被播放的音视频文件路径或网址。存放了视频的基本信息和分段视频的索引地址。就是按顺序下载播放索引列表的视频，从而完成一部完整视频的播放。
先在项目中安装videojs。

npminstall --save video.js
npminstall --save videojs-contrib-hls

下载成功后在项目的package.json文件中，有这两行代码。

在需要播放视频的页面中引入videojs

import'video.js/dist/video-js.css';import videojs from 'video.js';

在vue页面中加入video标签。

class="video-js vjs-default-skin"

是videojs自带的样式需要加上，否则视频样式会有问题，

style="width: 100%;height: 100%; object-fit: fill" 

这行代码是为了使视频占满div容器。

<divclass="vedio"><videoid="valveVideogj"class="video-js vjs-default-skin"autoplaystyle="width: 100%;height: 100%;object-fit: fill"></video></div>

在onMounted节点初始化播放器。
videojs函数有三个参数，分别为video标签id(id必须要唯一)，要实例化的videojs配置，以及回调函数。options(rtsp)函数，rtsp为视频地址。http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8(网上找的m3u8格式视频)

functionoptions(src){return{
                autoplay:true,// true,浏览器准备好时开始播放。
                muted:true,// 默认情况下将会消除音频。
                loop:true,// 导致视频一结束就重新开始。
                controls:false,//取消视频中的进度条
                preload:'auto',// auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language:'zh-CN',//汉化
                fluid:true,// 当true时，将按比例缩放以适应其容器。
                sources:[{
                    type:'application/x-mpegURL',
                    src  //视频播放地址}],
                notSupportedMessage:'此视频暂无法播放，请稍后再试',// 无法播放媒体源时显示的默认信息。
                textTrackDisplay:false,}}let player;onMounted(()=>{try{
                player =videojs("valveVideo",options(rtsp),()=>{
                    player.play();});}catch(error){console.log(error);}})

播放效果图


视频的大小可以通过改变外层div容器的大小来改变。

.vedio{width: 632.89px;height: 356px;background: #000;padding: 3px;border: 1px solid #707070;margin: 30px 30px 0 30px;}

ps
从其他页面返回到该页面会碰到

video.es.js:228 videojs: warn: player "valvevideogj" is already initialised. options will not be applied.

错误
则是因为播放器已经初始化过了，不能重复调用video标签作用于同一个video id，需要离开页面是销毁video，再重新初始化。

onUnmounted(()=>{//离开页面时销毁video
            player.dispose()})