vue使用videojs控制后台m3u8数据请求

摘要:
我不会告诉你如何使用Video.js。如果您感兴趣,请访问:https://videojs.com/VideoJS没有控制后台数据请求的停止等参数,只有暂停视频暂停()方法,但不会暂停后台请求。如果我的页面上需要存在多个Vedio实例,这将极大地影响页面效率。我使用Vue组件化的VedioJS控件1。动态控制参数close管理视频到m3u8的后台请求;2.动态

关于Video.js的使用方法就不再说了,有兴趣的请迁跃:https://videojs.com/

VideoJS中并没有stop之类控制后台数据请求的参数,只有暂停 video.pause()方法 ,但是对于后台的请求是不会暂停的,如果我页面有多个Vedio实例需要存在,这样就太影响页面效率了

vue使用videojs控制后台m3u8数据请求第1张

我使用的是Vue 组件化的VedioJS控件

vue使用videojs控制后台m3u8数据请求第2张

1、动态控制参数close管理video对m3u8的后台请求;

2、动态生成videoID;

vue使用videojs控制后台m3u8数据请求第3张

3、在子组件中监听closed的值;

watch:{
      close(newValue,oldValue){
        if(newValue==true){
         var player = videojs(this.videoMy);
            if (typeof (player) != "undefined") {
              player.pause()  //暂停
              player.dispose()  //销毁
                  }
            }else{    
          //动态生成video $(
".vqp").html("<video id=" + this.videoMy + " controls preload='none' ><source type='application/x-mpegURL'></video>"); this.getVideo() } } },

根据close的值就可以控制video的销毁和创建了,

 vue使用videojs控制后台m3u8数据请求第4张

PS:我用的是Element-ui的dialog 组件中嵌套着VideoJS,遇到一个关于组件未能完全销毁,而新组件就生成的BUG,然后就导致当前Video实例就一直在跑圈圈,有后台数据请求,但无画面的问题,这个问题是因为dialog 隐藏后还未完全销毁前,遇到了新的实例创建,这个问题也属于疑难杂症可以仍旧使用 $nextTicket ,也可以在videoA组件上加一个v-if判断就行了

vue使用videojs控制后台m3u8数据请求第5张

大概思路就是监听每次调用,结束后就暂停、销毁video实例 :

 player.pause()  //暂停
 player.dispose()  //销毁
每次重新调用时重新生成video实例:
//动态生成video
$(".vqp").html("<video     controls preload='none' ><source type='application/x-mpegURL'></video>");
this.getVideo()





免责声明:文章转载自《vue使用videojs控制后台m3u8数据请求》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ELK之nginx日志使用json格式输出Docker 创建镜像、修改、上传镜像下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue中Axios的封装和API接口的管理

前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习。如果对原博主造成侵犯,我会立即删除。 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios查看更多关于 axios 的文章 的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 一、ax...

Ant Design Vue日期选择器DatePicker设置日期格式、获取并设置数据

导入在使用日期选择器前需要先引入momnet: import moment from "moment";import "moment/locale/zh-cn"在引入后使用选择器: <a-date-pickerformat="YYYY-MM-DD HH:mm:ss"v-decorator="['time',{rules: [{ required: t...

Vue2 使用Typescript 使用vue-property-decorator的简单介绍

参考:https://github.com/kaorun343/vue-property-decorator 怎么使vue支持ts写法呢,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-component. 首先安装:  npm i -D vue-property-decorator 我们来看下页面上代码展示...

vue导出excel文件损坏

export function downloadFile(obj, name, suffix = "xlsx") { const url = window.URL.createObjectURL(new Blob([obj], {type: "application/vnd.ms-excel"})) const link = document.cr...

vuejs 组件 移动端push 没有渲染页面

this.idcards.push(arr) 这个无效 就知道了 vuejs有个跟push相同的方法 console.log(this.list.push.toString()) 这个push是个同名方法并非 native 的 array push只有用它这个“假”方法才能运行监听函数更新视图 你直接用 Array.prototype.push.app...

页面刷新404【VUE页面刷新404】

问题说明: 公司项目的架构技术前端是VUE,后端是java。 部署模式为nginx和jar包部署。 VUE前端代码放在nginx默认静态页面下,也就是html文件夹下。 当访问项目的时候刷新出现404。 解决办法: 方法一: 修改nginx配置文件 error_page 404 500 502 503 504 /index.html; locat...