因为需要对接监控,在网上找了很多文章参考,都会报错,本文附上一篇实测有效的组件
npm install --save video.js
支持HLS
npm install --save videojs-contrib-hls
<template>
<div class="input_video">
<video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" disablePictureInPicture
style="width: 100%; height: 100%; object-fit: fill" autoplay muted>video>
div>
template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
// npm install --save video.js
// npm install --save videojs-contrib-hls
export default {
props: [ // 接收父组件的数据
'url'
],
data() {
return {
videoPlayer: null,
options: {
controls: true,
preload: 'none',
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
playbackRates: [0.5, 1, 1.5, 2, 2.5, 3]
}
};
},
created() {
console.info("视频流地址" + this.url)
},
mounted() {
this.initVideo();
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
},
methods: {
initVideo() {
var myPlayer = videojs('myvideo', this.options, function onPlayerReady() {
this.on('error', function () {
// 报错信息
var mediaError = this.error()
console.log('mediaError', mediaError)
myPlayer.createModal(mediaError.message);
})
})
myPlayer.src([
{
type: "application/x-mpegURL",
src: this.url //CCTV3频道
}
]);
myPlayer.play();
this.videoPlayer = myPlayer;
},
setVideoPlay(url) {
this.videoPlayer.src([
{
type: "application/x-mpegURL",
src: url //CCTV3频道
}
]);
this.videoPlayer.play();
},
suspended(){
this.videoPlayer.pause();//暂停
}
},
};
script>
<style>
.input_video {
width: 100%;
height: 100%;
margin: 0 auto;
}
style>
调用Demo
<template>
<div class="body_div">
<Videoplayer class="video" ref="videoplayer" :url="url">Videoplayer>
<el-input v-model="input" placeholder="请输入流地址">el-input>
<el-button type="success" @click="play()">播放流文件el-button>
div>
template>
<script>
import Videoplayer from '@/components/Video';
export default {
name: 'Hlsplayer',
components: {
Videoplayer
},
data() {
// http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
return {
url: "",
input: ""
};
},
created() {
},
beforeDestroy() {
},
methods: {
play() {
this.$refs.videoplayer.setVideoPlay(this.input)
}
}
}
script>
<style scoped>
.body_div {
width: 100vw;
height: 100vh;
background-color: #081135;
}
.video {
width: 50vw;
height: 50vh;
}
style>
type: 'video/mp4', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目