vue中使用video.js 播放m3u8直播流

需求描述

支持播放m3u8直播流 + 录屏视频；同时可以动态更改视频直播地址，新增，删除视频。

实现效果

实现代码

安装依赖

 npm install video.js --save // 视频播放器插件npm install videojs-contrib-hls  --save // 播放hls流插件npm install @videojs/http-streaming  --save

具体代码如下：

<template><div id="app"><button @click="addvideourl">新增视频直播</button><button @click="changevideourl(0)">更换视频地址 - 录屏</button><button @click="changevideourl2(1)">更换视频地址 - 直播流</button><button @click="delvideourl(src.length - 1)">删除视频</button><div class="video-div"><videov-for="item in src":id="'video_' + item.id"class="video video-js vjs-default-skin"preload="auto":key="item.id"><source :src="item.src" :type="item.type" /></video></div></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css"; //videojs样式
import "videojs-contrib-hls"; //用于支持m3u8
import "@videojs/http-streaming";
export default {data() {return {player: {}, // map对象src: [{type: "application/x-mpegURL",id: "111",src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538505008?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",},{type: "video/mp4",id: "222",src: "https://ping.mfyke.com/data/video/1.webm",},],};},mounted() {this.videoInit();},methods: {videoInit() {// 播放器初始化this.$nextTick(() => {this.player = {};this.src.forEach((v) => {if (this.player[v.id]) {this.player[v.id].src({ src: this.videoUrl, type: "application/x-mpegURL", });this.player[v.id].load();this.player[v.id].play();} else {this.player[v.id] = videojs("video_" + v.id,{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: false,muted: true, //静音模式 、、 解决首次页面加载播放。},function () {this.play(); // 自动播放});}});});},//新增addvideourl() {let obj = {id: 333,type: "application/x-mpegURL",src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538505006?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",};this.src.push(obj);this.videoInit();},//删除视频delvideourl(index = 0) {let v = this.src[index];if (this.player[v.id]) {this.player[v.id].dispose(); // dispose()会直接删除Dom元素 this.src.splice(index, 1);}},// 更换视频地址2changevideourl(index = 0) {let obj = {type: "video/mp4",src: "https://ping.mfyke.com/data/video/1.webm",};let v = this.src[index];if (this.player[v.id]) {this.player[v.id].src({ src: obj.src, type: obj.type });this.player[v.id].load();this.player[v.id].play();}},// 更换视频地址2changevideourl2(index = 1) {let obj = {type: "application/x-mpegURL",src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538504959?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",};let v = this.src[index];if (this.player[v.id]) {this.player[v.id].src({ src: obj.src, type: obj.type });this.player[v.id].load();this.player[v.id].play();}},},// 离开页面销毁视频播放器beforeDestroy() {for (let key in this.player) {this.player[key].dispose(); // dispose()会直接删除Dom元素}},
};
</script><style>
.video-div {display: flex;flex-wrap: wrap;
}
.video {width: 500px;height: 500px;margin-top: 2rem;margin-left: 24px;
}
</style>

vue中使用video.js 播放m3u8直播流相关推荐

Video.js 播放m3u8直播流
谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流粘贴到html打开即可 <!DOCTYPE html> ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
dplayer js控制自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
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.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载
1.下载依赖 npm i dplayer -S npm i hls.js -S 2.vue页面 <template><view class="content"&g ...

vue中使用video.js 播放m3u8直播流

需求描述

实现效果

实现代码

vue中使用video.js 播放m3u8直播流相关推荐

最新文章

热门文章

vue中 使用video.js 播放m3u8直播流

需求描述

实现效果

实现代码

vue中 使用video.js 播放m3u8直播流相关推荐

最新文章

热门文章

vue中使用video.js 播放m3u8直播流

vue中使用video.js 播放m3u8直播流相关推荐