需求：播放实时监控视频
记录关于播放器的坑（播放hls流的视频：后缀名为.m3u8）
1、使用videoPlayer
首先安装
npm install --save vue-video-player
npm install -save videojs-contrib-hls
在main.js中引入：
import VideoPlayer from 'vue-video-player' // video
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
require('videojs-contrib-hls')
Vue.use(VideoPlayer)
使用播放器的页面代码：
<template>
<!-- 监控 -->
<div class="video-Box">
<div class="video-box" v-for="(item,index) in videos" :key="index">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
:options="lookVideo(item)"
:x5-video-player-fullscreen="true"
@pause="onPlayerPause($event)"
@play="onPlayerPlay($event)"
@fullscreenchange="onFullscreenChange($event)"
@click="fullScreen"
></video-player>
<video :src="item.source"></video>
</div>
</div>
</template>
<script>
import {videoPlayer} from 'vue-video-player';
import 'vue-video-player/node_modules/video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
components:{
videoPlayer
},
data(){
return{
videos:[
{source:'视频链接1'}，
{source:'视频链接2'}，
]
}
},
methods:{
// 视频监控
lookVideo(item){
let playerOptions={
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "application/x-mpegURL",
src: item.source
}],
// poster: "你的封面地址",
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
return playerOptions
},
onPlayerPlay (){
},
fullScreen(){
},
onFullscreenChange(){
}
}
}
</script>
使用这个方法播放成功，但是播放十几秒之后，就一直转圈圈加载，卡住了。
探索新的方法：
2、vue页面嵌套html页面，使用video.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放器</title>
<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.12.1/alt/video-js-cdn.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.12.1/video.js"></script>
<style type="text/css">
video{
object-fit: initial;
}
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
position: absolute;
}
.quarter-div {
width: 45%;
height: 45%;
float: left;
margin-top: 1%;
}
.quarter-div:nth-child(2n){
margin-left: 1%;
}
</style>
</head>
<body>
<div class="main">
<video id="example-video1" class="quarter-div video-js vjs-default-skin" controls>
<source src="视频1" type="application/x-mpegURL">
</video>
<video id=example-video2 class="quarter-div video-js vjs-default-skin" controls>
<source src="视频2" type="application/x-mpegURL">
</video>
<video id=example-video3 class="quarter-div video-js vjs-default-skin" controls>
<source src="视频3" type="application/x-mpegURL">
</video>
<video id=example-video4 class="quarter-div video-js vjs-default-skin" controls>
<source src="视频4" type="application/x-mpegURL">
</video>
</div>
</body>
<script type="text/javascript">
$(function (){
var options = {
muted:'muted',
preload:'preload',
// autoplay:true,
};
console.log(options);
var player1 = videojs('example-video1', options, function onPlayerReady() {
this.play();
});
var player2 = videojs('example-video2', options, function onPlayerReady() {
this.play();
});
var player3 = videojs('example-video3', options, function onPlayerReady() {
this.play();
});
var player4 = videojs('example-video4', options, function onPlayerReady() {
this.play();
});
})
</script>
</html>
此方法亦能播放成功，但是播放20几分钟后，有的就开始报错，视频中间出现打一个大叉叉。。。
继续探索新方法：
3、vue页面嵌套html页面，使用Dplayer播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
<title>Document</title>
<style>
div{
width: 40%;
/* height: ; */
float: left;
/* margin-left: 20px; */
}
</style>
</head>
<body>
<div id="dplayer"></div>
<div id="dplayer1"></div>
</body>
</html>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
mutex: false,
volume：0, //打开视频时默认音量
mutex: true, //允许多个视频同时播放
video: {
url: 'https://hls01open.ys7.com/openlive/73e8f7ad2ac44248b2bf2ad01a27c7e5.hd.m3u8',
type: 'customHls',
customType: {
customHls: function(video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
autoplay:true,
});
const dp1 = new DPlayer({
container: document.getElementById('dplayer1'),
mutex: false,
autoplay:true,
volume：0, //打开视频时默认音量
mutex: true, //允许多个视频同时播放
video: {
url: 'https://hls01open.ys7.com/openlive/8977c974c79846db9c6c762c6d2ffb3b.hd.m3u8',
type: 'customHls',
customType: {
customHls: function(video, player) {
const hls1 = new Hls();
hls1.loadSource(video.src);
hls1.attachMedia(video);
},
},
},
});
</script>
此方法播放成功，且经过多次测试，没有出现大的问题。
在vue页面也可使用Dplayer，请看官方文档
dplayer播放器的更多配置请看官方文档
Dplayer的官方文档：http://dplayer.js.org/guide.html#special-sponsors
9581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
