在uni-app中可以使用web插件进行播放视频流,需要用到render.js
renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs的主要作用有2个:
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
在视图层操作dom,运行 for web 的 js库

<template>
	<view class="video_player" id="videoPlayer" :infoData="infoData" :change:infoData="videosView.getVideoData"></view>
</template>
<script>
export default {
	props:{
		videoInfo:{
			type:Object,
			default:null
		}
	},
	data() {
		return {
			// 地图是否准备好
			isMapReady:false,
			infoData:null
		}
	},
	watch:{
		// 监听数据
		videoInfo:{
			handler(newVal,oldVal){
				if(newVal && this.isMapReady){
					this.infoData = JSON.parse(JSON.stringify(this.info))
				}
			},immediate:true
		}
	},
	methods:{
		// 接收render.js 传递过来的数据
		receiveRenderData(e) {
			if (e) {
				this.$nextTick(() => {
					this.isMapReady = true
					this.$nextTick(() => {
						// 写获取视频地址的接口,获取到视频数据后
						// 我这里写的从父组件传递的参数
						this.infoData = JSON.parse(JSON.stringify(this.info))
					})	
				})
			}
		},
		
	}
}
</script>
<script module="videosView" lang="renderjs">
export default {
	data() {
		return {
			videoInfo:null,
			player:null
		}
	},
	mounted() {
		if (typeof window.videoplayer === 'function') {
			// 初始化视频
			this.initVideo()
		} else {
			// 引入EasyWasmPlayer js库
			const script = document.createElement('script')
			script.src = '' //服务器视频插件地址 插件在资源包里面,需要部署在服务器上
			script.onload = this.initVideo.bind(this)
			document.head.appendChild(script)
		}
	},
	methods:{
		// 获取逻辑层传递过来的视频数据
		getVideoData(obj){
			if (this.player) {
				this.destroyVideo()
			}
			if(obj){
				this.videoInfo = obj
				this.playVideo()
			}
		},
		// 播放视频
		playVideo(){
			this.player = new WasmPlayer(null, 'videoPlayer', this.callbackfun, {
				cbUserPtr: this,
				Height: true
			})
			// 调用播放
			let videoUrl = this.videoInfo .url
			this.player.play(videoUrl, 1)
		},
		callbackfun(e, m, n) {
			// e 类型,比如全屏之类的 full全屏 unFull 不是全屏
			if (e == 'full') {
				// this.$ownerInstance.callMethod('receiveRenderFull', true)
			} else if (e == 'unFull') {
				// this.$ownerInstance.callMethod('receiveRenderFull', false)
			}
		},
		//  销毁视频
		destroyVideo() {
			if (this.player) {
				this.player.destroy()
				this.player = null
			}
		},
		// 初始化视频插件
		initVideo() {
			// 告诉逻辑层视频插件准备好了
			this.$ownerInstance.callMethod('receiveRenderData', true)
		},
		
	}
	
}
</script>
<style lang="scss" scoped>
.video_player{
	width:100%;
	height:400rpx;
}
</style>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐