uni-app使用web插件播放视频流
·
在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>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)