vue实现rtmp流播放
vue实现rtmp流播放
使用所需
"dependencies": {
"videojs-contrib-hls": "5.14.1",
"videojs-contrib-hls.js": "3.2.0",
"videojs-flash": "2.1.0",
"e-vue-contextmenu": "^0.1.3",
},
实现代码
我就直接把.vue文件放进来了,所使用的rtmp流来源于：点击查看
无需配置main.js，支持右键行为。
<template>
<div class="liveView">
<!-- 右键 -->
<div style="height:0px;width:0px ;">
<Dropdown>
<DropdownMenu
v-show="downShow"
:style="{marginLeft:left+'px',textAlign:'center',marginTop:top+'px',position:'absolute',backgroundColor:'#EEEEEE',zIndex:100,borderRadius:'5px',fontWeight:'bold'}"
class="contextmenu"
>
<DropdownItem @click.native="stopPlay(nowIndex)" name="carLatLng">
<Icon type="ios-locate-outline" />停止播放
</DropdownItem>
<DropdownItem @click.native="changeVideo(nowIndex)" name="carLatLng">
<Icon type="ios-locate-outline" />切换码流
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<!-- 顶部图标 -->
<Row style="padding-top:0.4rem;">
<Col span="3" offset="20">
<img
@click="viewVideoOne"
width="20px"
height="20px"
src="../../../../assets/image/SurveillanceVideo/one.png"
/>
<img
@click="viewVideoFour"
style="margin-left:0.75rem"
width="20px"
height="20px"
src="../../../../assets/image/SurveillanceVideo/four.png"
/>
<img
@click="viewVideoNine"
style="margin-left:0.75rem"
width="20px"
height="20px"
src="../../../../assets/image/SurveillanceVideo/nine.png"
/>
</Col>
</Row>
<!-- 视频控件 -->
<div class="videoView">
<Row style="height:800px;width:1400px;padding-left:20px">
<Col :span="Aspan" v-for="(item,index) in videoList" :key="index">
<video-player
@contextmenu.prevent.native="rightClick($event,index)"
style="border:1px solid;"
:playsinline="true"
class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions[index]"
@pause="onPlayerPause($event)"
@play="onPlayerPlay($event,index)"
@fullscreenchange="onFullscreenChange($event,index)"
></video-player>
</Col>
</Row>
</div>
</div>
</template>
<script>
// import flvjs from "flv.js/dist/flv.js";
const isProduction = process.env.NODE_ENV === "production";
export default {
name: "liveView",
data() {
return {
nowIndex: "",
top: 0, //右键弹窗顶部距离
left: 0, //右键弹窗左部距离
downShow: false, //右键弹框
Aspan: "", //设置播放器的默认列大小
videoList: [], //存储trmp URL
playerOptions: [] //渲染vue-video-player组件使用
};
},
watch: {
// 监听data中的downShow值得更改
downShow(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
},
created() {
this.videoList = [
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
}
];
if (this.videoList.length == 1) {
this.Aspan = "24";
} else if (this.videoList.length == 4) {
this.Aspan = "12";
} else if (this.videoList.length == 9) {
this.Aspan = "8";
}
for (let i = 0; i < this.videoList.length; i++) {
let arrs = {
autoplay: true,
controls: true,
techOrder: ["flash", "html5"],
aspectRatio: "16:9",
sourceOrder: true,
notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
fluid: true,
flash: {
hls: {
withCredentials: false },
swf: isProduction
? "/vue-videojs-demo/static/media/video-js.swf"
: "/static/media/video-js.swf"
},
html5: {
hls: {
withCredentials: false } },
sources: [
{
withCredentials: false,
type: "application/x-mpegURL",
src: this.videoList[i].url
}
],
poster: isProduction
? "/vue-videojs-demo/static/images/logo.png"
: "/static/images/logo.png",
controlBar: {
timeDivider: false, // 时间分割线
durationDisplay: false, // 总时间
progressControl: false, // 进度条
customControlSpacer: false, // 未知
fullscreenToggle: true // 全屏
}
};
this.playerOptions.push(arrs);
}
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
},
methods: {
//停止
stopPlay(idx) {
console.log(idx);
this.$refs.videoPlayer[idx].player.pause(); // 暂停
},
//切换码流
changeVideo(idx) {
console.log(idx, this.videoList[idx]);
},
//播放
onPlayerPlay(player) {
player.play();
},
//暂停
onPlayerPause(player, index) {
},
//注销vue-video-player组件
remove() {
this.$destroy("videoPlayer");
},
//右键行为
rightClick(e, index) {
this.nowIndex = index;
const menuMinWidth = 105;
const offsetLeft = this.$el.getBoundingClientRect().left;
const offsetWidth = this.$el.offsetWidth;
const maxLeft = offsetWidth - menuMinWidth;
const left = e.clientX - offsetLeft;
if (left > maxLeft) {
this.left = maxLeft;
} else {
this.left = left;
}
this.top = e.clientY - 60;
this.downShow = true;
},
//关闭菜单
closeMenu() {
this.downShow = false;
},
//单个视频播放
viewVideoOne() {
this.videoList = [
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
}
];
this.Aspan = "24";
},
//四个视频播放
viewVideoFour() {
this.videoList = [
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
}
];
this.Aspan = "12";
},
//九个视频播放
viewVideoNine() {
this.videoList = [
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
},
{
url:
"rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
}
];
this.Aspan = "8";
}
}
// }
};
</script>