EasyPlayer流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。
网上按照操作后 提示Uncaught ReferenceError: videojs is not defined,可能是版本的问题
1、首先,在HBuider X下创建一个项目;
2、在GitHub上Clone下来6.0版本的easyplayer.js,下载地址如下:
3、 找到对应的文件;demo文件下的2.6.14_vue.min.js和js文件
4、将上面的这两个文件复制放到用户项目的static目录下,并在App.vue中如下图一样引入播放器;
let script1 =document.createElement('script')
script1.src='./static/2.6.14_vue.min.js'
let script2 =document.createElement('script')
script2.src='./static/js/easyplayer-pro.js'
document.head.appendChild(script1)
document.head.appendChild(script2)
5、页面创建播放器
<template>
<view >
<view id="easyplayer" style="width:750rpx;height:420rpx;background-color: black;"></view>
<view @click="play">播放</view>
</view>
</template>
<script>
export default {
data() {
return {
videoUrl: "你的视频地址"
}
},
onLoad() {
},
onReady() {
// this.playCreate()
let interval = setInterval(() => {
if(EasyPlayerPro){
clearInterval(interval)
this.playCreate()
}
// console.log(EasyPlayerPro)
},500)
},
methods: {
play(){
setTimeout((url) => {
this.playerInfo && this.playerInfo.play(url).then(() => {
}).catch((e) => {
console.error(e);
});
}, 0, this.videoUrl)
},
playCreate(){
var container = document.getElementById('easyplayer');
var easyplayer = new EasyPlayerPro({
container: container, // 视频播放容器的 DOM 元素
decoder: './static/js/decoder-pro.js', // 视频解码器文件路径
videoBuffer: 0.2, // 视频缓存时长(单位:秒)
isResize: true, // 是否支持播放器大小调整
text: "", // 初始显示的文本(为空字符串表示不显示)
loadingText: "加载中", // 加载视频时显示的文本
useMSE: true, // 是否使用 MSE(Media Source Extensions)
useSIMD: false, // 是否使用 SIMD(Single Instruction Multiple Data)
useWCS: false, // 是否使用 WCS(WebRTC通讯服务)
isMulti: true, // 是否支持多路视频播放
hasAudio: false, // 是否有音频
reconnection: true, // 是否支持自动重连
// showBandwidth: true, // 是否显示网速(注释掉,未启用)
showPerformance: false, // 是否显示性能信息
operateBtns: { // 播放器操作按钮配置
fullscreen: true, // 是否显示全屏按钮
screenshot: false, // 是否显示截图按钮
play: false, // 是否显示播放按钮
audio: false, // 是否显示音频控制按钮
record: false, // 是否显示录制按钮
quality: false, // 是否显示画质选择按钮
performance: false, // 是否显示性能按钮
},
watermarkConfig: { // 水印配置
text: { // 水印文本配置
content: 'easyplayer-pro' // 水印显示的文本内容
},
right: 10, // 水印距离右边的距离(单位:像素)
top: 10 // 水印距离顶部的距离(单位:像素)
},
playbackForwardMaxRateDecodeIFrame: 1, // 快进最大解码速率(单位:倍速)
isWebrtcForOthers: true, // 是否对其他流使用 WebRTC
demuxUseWorker: true, // 是否使用 Web Worker 进行解复用
supportHls265: false, // 是否支持 HLS 265 格式的视频流
});
easyplayer.on("fullscreen", function (flag) {
console.log('is fullscreen', flag)
})
easyplayer.on('playbackPreRateChange', (rate) => {
easyplayer.forward(rate);
})
easyplayer.on('playbackSeek', (data) => {
easyplayer.setPlaybackStartTime(data.ts);
})
this.playerInfo = easyplayer
}
}
}
</script>
<style>
.content {
width: 100%;
height: 400rpx;
}
</style>
如果对你有帮助的话,可以回来点个赞哦