Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放

先介绍只有一个视频的代码

首先，我们需要在vue工程中安装video.js相关依赖。

npm install --save video.js
npm install --save videojs-contrib-hls

接着，我们在需要播放视频的页面引入js对象


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

指定一个video容器，例如

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png"><source src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8" type="application/x-mpegURL">
</video>

最后，我们在mounted节点初始化播放器：

videojs('my-video', {bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true
}, function () {this.play()
})

多视频列表循环播放代码

把上面代码数据改成活的即可，如下：

<div v-for="(item,index) in vedioData" :key="'spqymain'+index"><video :id="'my-video'+index" class="video-js vjs-default-skin  vjs-big-play-centered" controls preload="auto" style='width: 100%;height: 100%'><source :src="item.path" style='width: 100%;height: 100%' type="application/x-mpegURL"></video></div>

export default {data() {return {vedioData: [{region: "烟台市蓬莱阁景区1",path:"http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8",type: "application/x-mpegURL" //播放hls流},{region: "烟台市蓬莱阁景区2",path:"http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8",type: "application/x-mpegURL" //播放hls流},]};},
mounted() {
//id必须是唯一的，遍历id,for(let i=0;i<this.vedioData.length;i++){videojs("my-video"+i,{// bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true},function() {this.play();});}},
}

Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放相关推荐

Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
vue 判断移动端、pc端
判断移动端或pc端经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. 先写个方法: //APP.vue isMobile ...
pc端vue登录如何调用软键盘_使用vue实现简单键盘的示例(支持移动端和pc端)
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用实现效果: Keyboard.vue 123 符 · {{key}} import clicko ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
vue移动端和pc端切换显示两套不同的代码
首先在App.vue中 <template ><div id="app" ><r ...
Video.js插件切换视频源并操作m3u8格式视频
目录第一章 videojs的配置与简介第二章更改视频源代码与实例第三章 api的部分应用实例第四章视频api补充介绍添加事件事件绑定前言:老师让我修改一个需要播放器的界面,之前的播放 ...
手机上php视频格式怎么转成mp4,我想知道手机上用爱奇艺下的视频怎么转换成MP4格式...
最近不知道大家有没有在爱奇艺看中国新说唱啊?小编是这个节目的老粉丝了,从名字没改之前的第一季就开始看了,第一季确实让我喜欢上了这种风格的音乐,第二季开始之后虽然名字改了,但是内容还是没有变.感觉比之前 ...
video JS实现多视频循环播放
video 的实现 <video id="myvideo" width="100%" height="auto" controls=& ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...

Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放

先介绍只有一个视频的代码

多视频列表循环播放代码

Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放相关推荐

最新文章

热门文章