前言
1、通过接口获取媒体流地址或静态地址;(省略)
2、通过 西瓜播放器插件xgplayer 以及相关xgplayer支持的插件实现直播
本质:始终在调用流地址实现视频播放(个人理解)
使用
- template
<div
ref="video"
id="mmid"
v-show="islivea"
></div>
- 安装西瓜播放器插件
官网
$ npm install xgplayer
$ npm install xgplayer-hls.js
// 由于是直播,我们使用xgplayer-hls.js插件,对于hls协议的点播(直播)可以使用该插件完成,
//该插件是对hls.js的封装,力求稳定的同学可以使用该插件。
// 其他插件也可以,比如 xgplayer-flv
// $ npm install xgplayer-flv
- 使用
引入
import Player from "xgplayer"; // 用来播放录播的MP4格式视频
// import FlvPlayer from "xgplayer-flv"; // 直播流flv
import HlsJsPlayer from "xgplayer-hls.js"; // 直播流m3u8(hls)
mounted下
// ts书写 js把:void去掉
mounted(): void {
this.getVideo();
}
相关参数配置和说明
// ts书写 js把private 私有声明去掉
private getVideo() {
setTimeout(() => {
this.videoPlayer = new HlsJsPlayer({
el: document.querySelector("#mmid"), // 选择demo
// url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
url: 'http://play.happok.com/happok/7440.m3u8?auth_key=1621421808-0-0-d284825ce4d69e098fbba3b3748b63b7',
width: "100%",
height: "240px",
volume: 0.6, // 初始音量
autoplay: true, // 自动播放
playsinline: true,
isLive: true, // 是否直播
// rotate: { //视频旋转按钮配置项
// innerRotate: true, //只旋转内部video
// clockwise: false // 旋转方向是否为顺时针
// },
controls:true, // 播放器控制
controlsList: ['nodownload'], // 关闭控制器相关配置 ['nodownload','nofullscreen','noremoteplayback'] 只对原生video有效 对自定义UI请使用ignores选项
ignores: ['fullscreen'], // 控制条忽略相关配置项 ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume']
lang: 'zh-cn', // 语言支持 'zh-cn' | 'en' | 'jp' 中文、英文、日文
rotateFullscreen: false,// 样式全屏,不旋转=>视频会随着手机横竖屏进行切换
closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态 关闭
closeVideoTouch: true, // h5端触发touchend事件后视频切换播放/暂停状态 关闭
videoInit: true,
poster: 'https://pics5.baidu.com/feed/ae51f3deb48f8c544ac3d4662d3a57fde0fe7f06.jpeg?token=ea1493323bf5a129e0569426a19e0e3e', // 封面图
cors: true // 请求是否跨域
});
}, 150);
}
- 适配相关-同层播放微信端
'x5-video-player-type':'h5-page', //同层播放
playsinline: true // 处理ios点击播放默认全屏问题
5、api-事件 优化相关(网慢提示、以及结束控制)
// 播放器相关参数控制
console.log(this.videoPlayer.networkState) // 返回视频的当前网络状态
console.log(this.videoPlayer.hasStart)// 是否开始播放
console.log(this.videoPlayer.readyState)//返回视频的就绪状态
this.videoPlayer.on('waiting',()=>{ // 页面监听缓冲时间,如果存在则进行判断缓冲的时间是否大于3秒
console.log('waiting网慢加载')
this.$set(this.loadObj,'wait',true) // 定义属性保存出现缓冲
if(this.loadObjsetTimeOut){ // 定义属性保存setTIMEOUT事件,确保只执行一次
clearTimeout(this.loadObjsetTimeOut)
}
this.loadObjsetTimeOut=setTimeout(()=>{
if(Object.keys(this.loadObj).length > 0){ // 判断3s后是否还在缓冲
Toast({
type: 'html',
message: '<span>本端网络信号弱</span>',
position: 'top',
duration: 2000,
className:'cctoast',
});
}
setTimeout(()=>{ // 判断13s后是否还在缓冲
if(Object.keys(this.loadObj).length > 0){
Toast({
type: 'html',
message: '<span>本端网络信号弱,请稍后重试</span>',
position: 'top',
duration: 2000,
className:'cctoast',
});
}
},10000)
},3000)
})
this.videoPlayer.on('canplay',()=>{ // 监听播放事件 缓冲如果结束了则对对象置空
console.log('canplay可以播放')
if(Object.keys(this.loadObj).length > 0){
this.loadObj = {}
}
})
this.videoPlayer.on('error',(error)=>{
Toast({
type: 'html',
message: '<span>当前无直播</span>',
position: 'top',
duration: 3000,
className:'cctoast',
});
// 视频流404的时候=>视频停止推流 进行监听错误的结束事件
if(this.videoPlayer.readyState=='没有关于音频/视频是否就绪的信息'){
//逻辑
//结束视频
// 一般可以使用一张图片进行代替视频demo
}
})