结合video.js播放rtmp格式、flv格式、mp4等格式的视频

1.下载相应插件，只能通过npm或者yarn下载， cnpm下载后不可用

npm install video.js –save
npm install videojs-flash –save //rtmp格式
//flv格式
npm install flv.js –save
npm install videojs-flvjs-es6 –save
 
2.封装视频播放组件

<template>
<video
ref=”videoPlayer”
class=”video-js vjs-default-skin vjs-big-play-centered”
style=”width: 100%;height: 100%”
></video>
</template>

<script>
import videojs from “video.js”;
import “video.js/dist/video-js.css”;
import “videojs-flvjs-es6”;
import “videojs-flash”;

export default {
props: {
videoUrl: {
type: String,
default: “”
}
},
data() {
return {
videoPlayer: null
};
},
mounted() {
this.handelVideoUrl();
},
methods: {
handelVideoUrl() {
let options = {
muted: true,
controls: true,//进度条
autoplay: false,//自动播放
loop: true,//是否循环
languages: {
“zh-CN”: require(“video.js/dist/lang/zh-CN.json”)
},
language: “zh-CN”,
preload: “auto”
};
const url = this.videoUrl.replace(/\s+/g, “”);
if (url.indexOf(“rtmp”) > -1) {
//rtmp格式视频
options = {
…options,
techOrder: [“html5”, “flash”],// 兼容顺序
sources: [{ src: this.videoUrl, type: “rtmp/flv” }]
};
} else if (url.lastIndexOf(“.”) > -1) {
if (url.substring(url.lastIndexOf(“.”) + 1) === “flv”) {
//flv格式视频
options = {
…options,
techOrder: [“html5”, “flvjs”],// 兼容顺序
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false
}
},
sources: [{ src: this.videoUrl, type: “video/x-flv” }]
};
} else {
//其他格式视频
options = {
…options,
sources: [{ src: this.videoUrl, type: “video/mp4” }]
};
}
}

this.videoPlayer = videojs(this.$refs.videoPlayer, {
…options
});
}
},
destroyed() {
if (this.videoPlayer) {
this.videoPlayer.dispose();
}
}
};
</script>
 
3.模态框中引用组件

html代码：

<el-dialog
title=””
:visible.sync=”dialogTableVisible”
:modal=”false”
width=”700px”
class=”dialog-view”
@close=”dialogTableVisible = false”
>
<hls-video
v-if=”dialogTableVisible”
:videoUrl=”currentFileUrl”
class=”videoBox”
style=”height: 370px”
></hls-video>
</el-dialog>
 
js代码

import HlsVideo from “./HlsVideo”;
export default {
components: { HlsVideo },
data() {
return {
currentFileUrl: “”, //当前视频地址
dialogTableVisible: false
};
},
}
————————————————
版权声明：本文为CSDN博主「依赖_赖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39150852/article/details/109156698