uniapp项目h5中使用EasyPlayer

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，下载地址如下：

https://github.com/EasyDarwin/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>

 如果对你有帮助的话，可以回来点个赞哦