1.下载flv.js
这里我用的是 “flv.js”: “^1.6.2”,
npm install flv.js
2.引入使用
import flvjs from "flv.js";
3.元素
<template>
<div class="view-page-default shi-shi-shi-ping">
<div class="video-box" ref="videoBox">
<div v-for="(item, index) in urls" :key="index">
<div :class="'item-video-box' + (item.full ? ' full' : '')">
<div>
<video
class="video-js"
preload="auto"
:poster="item.poster"
@canplay="canplay"
@play="videoPlay"
:data-index="index"
></video>
<div
@click="playRun"
:data-index="index"
:class="
'btn' +
(item.play
? ' hid'
: item.loading
? ' loading'
: item.pause
? ' play'
: ' play')
"
>
<div></div>
</div>
<div
v-if="item.play"
@click="videoFull"
:data-index="index"
:class="'full-screen' + (item.full ? ' full' : '')"
></div>
</div>
</div>
<div class="item-video-name">{
{
item.name }}</div>
</div>
</div>
</div>
</template>
js里面
data() {
return {
urls: [
{
name: "xxx视频",
url: "xxxxx.live.flv",
poster: "xxx.jpg"
},
],
itemVideo: null
};
},
//点击其它的视频禁用正在播放的视频
watch: {
itemVideo: function(newValue, oldValue) {
const that = this;
if (oldValue) {
that.urls.forEach((v, index) => {
if (index == oldValue) {
if (v.flvPlayer) {
v.flvPlayer.pause();
v.play = false;
v.pause = true;
v.loading = false;
url.full = false;
clearTimeout(v.stopTime);
v.stopTime = null;
that.$forceUpdate();
}
}
});
}
}
},
methods: {
// 全屏
videoFull(e) {
let self = this;
let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
if (url.full) {
url.full = false;
} else {
url.full = true;
}
this.$forceUpdate();
},
// 播放
videoPlay(e) {
let self = this;
let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
if (url.stopTime) return;
// 倒计时
url.stopTime = setTimeout(() => {
url.flvPlayer.pause();
url.play = false;
url.pause = true;
url.loading = false;
// url.full = false;
self.$forceUpdate();
}, 10 * 60 * 1000);
},
// 可以播放
canplay(e) {
let self = this;
let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
let py = e.target;
if (url.play) return;
let urlIndex = py.getAttribute("data-index");
this.itemVideo = urlIndex;
url.flvPlayer.play();
url.play = true;
url.pause = false;
url.loading = false;
self.$forceUpdate();
},
playRun(e) {
let py,
self = this;
if (!e.target.classList.contains("btn")) {
py = e.target.parentNode;
} else {
py = e.target;
}
let url = self.urls[parseInt(py.getAttribute("data-index"))];
let liveVideo = py.parentNode.getElementsByClassName("video-js")[0];
let urlIndex = py.getAttribute("data-index");
this.itemVideo = urlIndex;
if (url.play) {
// self.flvPlayer.pause();
url.flvPlayer.pause();
url.play = false;
url.pause = true;
url.loading = false;
// url.full = false;
clearTimeout(url.stopTime);
url.stopTime = null;
// clearTimeout(self.stopTime);
// self.stopTime = null;
self.$forceUpdate();
return;
} else if (url.pause) {
// self.flvPlayer.play();
url.flvPlayer.play();
url.play = true;
url.pause = false;
url.loading = false;
// url.full = false;
self.$forceUpdate();
return;
}
url.play = false;
url.pause = false;
url.loading = true;
self.$forceUpdate();
url.flvPlayer = flvjs.createPlayer({
type: "flv",
isLive: true,
url: url.url
});
url.flvPlayer.attachMediaElement(liveVideo);
url.flvPlayer.load();
}
},
destroyed() {
if (this.flvPlayer) {
this.flvPlayer.pause();
this.flvPlayer.destroy();
}
}
4.样式
.video-box {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
> div {
position: relative;
display: inline-block;
vertical-align: top;
width: 33.33333%;
padding: pointSize(16rem); // &::before {
// content: "";
// display: block;
// position: relative;
// padding-top: 75%;
// }
}
}
.item-video-box {
position: relative;
width: 100%;
&::before {
content: "";
display: block;
position: relative;
padding-top: 56.25%;
}
&.full {
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
#video {
width: 100% !important;
height: 100% !important;
}
}
> div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.item-video-name {
font-size: pointSize(45rem);
margin-top: pointSize(16rem);
}
.video-js {
width: 100%;
height: 100%;
background-color: #000;
}
.hid {
> div {
display: none;
}
}
.btn {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.full-screen {
position: absolute;
right: 0;
bottom: 0;
width: 30px;
height: 30px;
//background-image: url(../../assets/fullscreen.png);
background-image: url(../../assets/exitFullScreen.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
&.full {
width: 50px;
height: 50px;
background-image: url(../../assets/exitFullScreen.png);
}
}
.pause {
> div {
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
margin-left: -40px;
&::after {
content: "";
display: block;
width: 80px;
height: 80px;
border: 4px solid #fff;
border-radius: 50%;
}
&::before {
content: "| |";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
font-size: 23px;
color: #fff;
font-weight: bold;
}
}
}
.play {
> div {
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
margin-left: -40px;
&::after {
content: "";
display: block;
width: 80px;
height: 80px;
border: 4px solid #fff;
border-radius: 50%;
}
&::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
display: block;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 20px solid #fff;
}
}
}
.loading {
> div {
&::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
// background: url(../../assets/loading.png) no-repeat center;
background-size: 100% auto;
animation: loading 1s linear infinite both;
}
}
}
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
