vue3使用videojs 播放m3u8格式视频

videojs是一个播放视频的js库    
    
    
，可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频    
    
    
。流媒体传输协议(hls)定义了用来控制播放的m3u8文件

m3u8是一个文本文件(播放列表文件) 


     


     


   ，里面的内容就是被播放的音视频文件路径或网址 


     


     


   。存放了视频的基本信息和分段视频的索引地址

 




 




 

。就是按顺序下载播放索引列表的视频

 




 




 

，从而完成一部完整视频的播放   

   

   

。

先在项目中安装videojs  

     

     

  。 npm install --save video.js npm install --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容器   
     
     
 。

<div class="vedio"> <video id="valveVideogj" class="video-js vjs-default-skin" autoplay style="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格式视频)

function options(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() })