vue+video.js播放.m3u8地址视频

使用的包

"video.js": "^7.6.6",
"videojs-contrib-hls": "^5.15.0",

案例

.vue部分

     <videoid="my-video"class="video-js vjs-default-skin vjs-big-play-centered"width="600"height="500"controlsmutedpreload="auto"autoplay><source :src="liveUrl" type="application/x-mpegURL" /></video>

.js部分

变量说明：
：src中使用了变量“liveUrl”，需要自己提前赋值，这里不贴了
videojsObj;预设为null

     if (that.videojsObj === null) {//如果对象为空，则生成video.js对象that.$nextTick(() => {that.videojsObj = videojs("my-video",function () {this.load(that.liveUrl);//加载播放地址this.play();//开始播放});})} else {//对象已存在时，直接重新加载视频流地址that.videojsObj.pause();//暂停播放that.videojsObj.src(that.liveUrl);//设置新的直播流that.videojsObj.load(that.liveUrl);//重新加载that.videojsObj.play();//开始播放}

注意

离开页面时，把对象释放掉，不然后台会一直请求.ts片段

this.videojsObj.dispose();

vue+video.js播放.m3u8地址视频相关推荐

Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
Video.js 播放m3u8直播流
谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流粘贴到html打开即可 <!DOCTYPE html> ...
使用video.js播放手机本地视频
一.开发背景简介项目要求调用手机本地相册的视频并在web页面上展示,但是原生的video标签并不能做到很好的兼容性,所以使用第三方库video.js调用手机本地视频并播放. 二.video.js的引 ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...

vue+video.js播放.m3u8地址视频

使用的包

案例

.vue部分

.js部分

注意

vue+video.js播放.m3u8地址视频相关推荐

最新文章

热门文章