1，vue播放视频之—引入.m3u8后缀的hsl视频流

效果图：

我这个是引入js的方式播放的。也可以用npm直接下载hsl.sj进行引入
1.public里面index.html页面引入对应的js

<script src="./jquery.min.js"></script>
<script src="./ezuikit.js"></script>
<script src="./hls.min.js"></script>
<script src="./jsPlugin-1.2.0.min.js"></script>

这些js太多了，私信我挨个发给你们
2，页面代码，也没什么，就一个for

      <div v-for="i in tableData" :key="i.index" ><video:id=i.idautoplay:src=i.locationcontrolsplaysInlinemutedwebkit-playsinline></video></div>

autoplay：自动播放。
controls：显示基本的控件。暂停、播放、进度条、等等
playsInline，webkit-playsinline：全屏播放控件
muted：兼容自动播放，有限浏览器不能自动播放就加这个属性

3，调接口

返回的数据格式是这样的，只要id和location就可以了。定义两个数组，一个数组转id和location。另一个数组只装id。用来停止播放的。

   methods: {searchs(currpage,pagesize){this.$axios.get(this.url+'listByAgencyCode',{params}).then( data=>{if(data.data.success){this.ids=[];// 置空ids中的内容let result = data.data.data;this.tableData = result.list;//页面上循环的对象数组 （格式：[{},{},{}]）this.totals = result.total;this.tableData.map((v,i) =>{this.tableData[i].id = "myPlayer_"+v.id;})for(let i=0,l = this.tableData.length;i<l;i++){//重新定义一个数组只装idthis.ids.push(this.tableData[i].id);}}});// 延时渲染视频this.renderVedio();},renderVedio(){setTimeout(()=>{// 初始化视频this.players = [];for(var j=0;j<this.ids.length;j++){let player = new EZUIKit.EZUIPlayer(this.ids[j]);this.players.push(player);}},2000);},}//销毁视频destroyed () {for(var j=0;j<this.players.length;j++){this.players[j].stop();}}

有什么写错的还请指正。

1，vue播放视频之—引入.m3u8后缀的hsl视频流相关推荐

vue 播放视频，默认有视频封面
前几天做视频管理器,原计划使用vue-video-player 库来播放视频,但是发现这个库播放视频,好像需要自己手动截封面[ps: 没有仔细研究vue-video-player,如果这里有不对的地方 ...
vue播放视频使用原生video标签基本功能（不含样式）
直接上代码: <template><div style="display: flex"><!-- 原生video标签,controls表示为可控制视频 ...
vue3中播放视频和m3u8后缀的视频解决办法
vue3中播放视频和m3u8后缀的视频解决办法 ****必须使用 vue@3.2.2及以上版本使用这个插件 vue3-video-play 官方地址地址链接跳转官方文档文档地址 npm 安装 ...
使用AVPlayer播放视频
iOS里面视频播放用到的是AVPlayer(包含在AVFoundation框架内)与AVAudioplayer有点类似但是AVPlayer得功能跟加强大,他可以用来播放音频也可以用来播放视频而且在 ...
videojs播放m3u8后缀视频Demo
videojs播放m3u8后缀视频Demo 转载自:https://segmentfault.com/a/1190000024447688 <!DOCTYPE html><html ...
Vue 播放监控m3u8视频流格式（Video.js）篇
因业务需求,对接监控显示自己的系统中. 前端框架vue 监控返回格式m3u8,视频流格式h264,如果视频流格式是h265的建议先把流转换h264. 4.本篇文章讲解video.js插件播放m3u8 ...
vue使用vue-video-player实现web视频直播展示m3u8格式
最近有一个需求,就是web展示摄像头的实时画面,mentor让我先探索探索,所以我先测试一些小demo. 这里边个人想了一下啊,还是比较复杂的,包含推流和拉流等操作,还有延迟的问题要解决. 自己主要负 ...
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频
1.背景项目中有涉及视频播放的需求,并且UI设计了样式,与原生的视频video组件有差异,所以使用了vue-video-player插件,并对vue-video-player进行样式改造,自定义播放 ...
长时长视频java存储及vue播放解决方法
需要在B/S架构播放2G的1小时时长视频,考虑性能要做视频分片一.大视频存储可以把视频进行切片处理,使用的工具软件ffmpeg 把视频ts切片生成.m3u8格式的. 先去官网下载软件:https: ...

1，vue播放视频之—引入.m3u8后缀的hsl视频流

1，vue播放视频之—引入.m3u8后缀的hsl视频流相关推荐

最新文章

热门文章