目录

前言

一  
    
    
    
、在vue中使用video.js

1.npm  安装 video.js

2.引入video.js

3.我这里是给它封装成了一个组件

引入video.js

props接收父组件传过来的值

触发销毁事件

关闭这个组件时触发video.js销毁

销毁创建初始化

最后的实现效果

前言

最近有个视频回放的功能    
    
    
  ，第三方给我这边rtmp协议的接口   


     


     


     
，rtmp协议在浏览器端是需要借助flash插件的



 




 




 




，现在主流浏览器都不再支持flash了   

   

   

 ，火狐最后支持的版本是84.0.2

     


     


     


  、谷歌的87.0.4270.0    

     

     

     ，这个可以上网搜一下  
    
    
    
。除了这种方式还有常用三种协议格式




  




  




  




，http-flv和http-Websoket协议格式前端可以用flv.js接收播放, hls协议原生video.js可以播放  


  


  


，如果是实时视频的话不推荐会有几秒延迟     
     
     
     ，回放的可以考虑在内

     


     


     


  。说了这么多




   




   




   



，由于一些原因
 



 



 



，这个功能只能选择rtmp协议 




 




 




 
。

一 




 




 




 
、在vue中使用video.js

1.npm  安装 video.js

npm i video.js

2.引入video.js

//全局引入在 main.js 中进行引入 import videojs from "video.js"; import "video.js/dist/video-js.css"; Vue.prototype.$video = videojs; //局部引入在页面引入 import videojs from "video.js" import "video.js/dist/video-js.css"

3.我这里是给它封装成了一个组件

做了两个按钮手动触发和关闭                   ，我这边需求是回放 




    




    




    


，点击播放时先显示时间弹框
















，点确认时再触发视频                  ，这个按照个人需求不需要的话取video就行

template配置

<template> <div class="video-details" id="video-detailss"> <div class="video-mm" id="video-mm"> <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" preload="none"></video> </div> <div class="btns"> <el-button size="mini" @click="handlePlays">点击播放</el-button> <el-button size="mini" @click="handleClear">关闭销毁</el-button> </div> </div> </template>

引入video.js

//这是个时间处理 import moment from moment import videojs from "video.js" import "video.js/dist/video-js.css"

props接收父组件传过来的值

props: { liftInfoData: { type: Object, default: {}, }, },

触发销毁事件

otherCloseVideo() { if (this.videoPlayers != null) { this.videoPlayers.pause() //关闭 this.videoPlayers.dispose();//销毁 this.videoPlayers = null } },

关闭这个组件时触发video.js销毁

如果不销毁会一直占用你的浏览器内存  



     



     



     

，直到把浏览器崩溃

beforeDestroy() { this.otherCloseVideo() //调用上方的销毁事件 },

销毁创建初始化

我这里的点播放的时候跳出选择时间节点的弹框

















，点确定时触发事件    
    
    
  ，先判断有无videoPlayers   


     


     


     
，有就给他先销毁再创建



 




 




 




，你也可以选择我下方的重置   

   

   

 ，一样可以达到切换视频的效果  

   

   

   

。

handlePlay() { if (this.videoPlayers) { this.videoPlayers.dispose();//dispose该销毁是销毁的所有dom节点 $("#video-mm").html( <video id="myvideo" class="video-js vjs-default-skin vjs- big-play-centered" preload="none"></video>);//手动再创建 //这里隐藏掉的是重置播放器,重新选择地址    

     

     

     ，达到一个切换视频的效果




  




  




  




，不太符合需求所以没有采用 // this.videoPlayers.reset(); // this.videoPlayers.src([ // { // type: application/x-mpegURL, // src:this.godSrc // }, // ]); // this.videoPlayers.load(); // this.videoPlayers.play(); } let that=this that.videoPlayers = videojs("myvideo", { //确定播放器是否具有用户可以与之交互的控件

     

     

     

 。没有控件  


  


  


，启动视频播放的唯一方法是使用 autoplay属性或通过Player API  




  




  




  。 // controls: true, //自动播放属性,muted:静音播放 muted: true, autoplay: true, //建议浏览器是否应在<video>加载元素后立即开始下载视频数据  


  


  


  


。 preload: "auto", //设置视频播放器的显示宽度（以像素为单位） width: "960px", //设置视频播放器的显示高度（以像素为单位） height: "522px", //这里面放的就是视频的地址 sources: [{ src: that.godSrc }], playbackRates: [0.5, 1, 1.5, 2] //倍速播放 }, function () { console.log("videojs播放器初始化成功"); }); that.videoPlayers.play(); },

最后的实现效果