uni-app App 下集成 xgplayer

孤独的逆行者 發表於 2022-6-16 09:39:00

uni-app APP 下集成 xgplayer
uniapp 使用 uni-upgrade-center
 
<h1 id="_label0">前言</h1>
如果是 Web 下集成 xgplayer 是很方便的，直接按照官方文档就可以，这里就不做讨论。
之所以是讲 app 下，原因在于 uni-app app 下调用这类 JS 库涉及到操作 dom 的就需要特殊出来。
在最开始按照 web 方式集成进来一直报错，一点头绪没有，经过几天摸索加上咨询找到了一些方式。
 
主要的解决方案有以下两张：
1、uni-app 的 renderjs 实现
2、webview 实现
 
<h1 id="_label1">一、webview</h1>
web-view 作为一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。（官方文档）
从上面这句话的介绍可以看出：
　　1、用来承载网页
　　2、会自动铺满
基于这两个特点，要实现的话基本思路是：
　　a、新建一个 html 页面，在这里使用 xgplayer
　　b、新建一个vue或者nvue页面，用 web-view 加载这个 html 页面
按照这个思路主要代码如下：
xgplayer.html
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
 <meta name="referrer" content="no-referrer">
<title></title>

<style type="text/css">
 html, body {width:100%;height:100%;margin:auto;overflow: hidden;background-color: #000000;-webkit-user-select: none; user-select: none;}

</style>

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
</head>
<body>
<div id="mse"></div>
<script src="//unpkg.byted-static.com/xgplayer@2.31.2/browser/index.js" charset="utf-8"></script>
 let url = getQueryVariable('src');

 let player = new Player({
 "id": "mse",
 "url": url,
 "playsinline": true,
 "width":"100%",
 "height":"181px",
 "autoplay": false,
 "whitelist": [''],
 // "danmu": {
 // "comments": [
 // {
 // "duration": 15000,
 // "id": '1',
 // "start": 3000,
 // "txt": '长弹幕长弹幕长弹幕长弹幕长弹幕',
 // "style": {//弹幕自定义样式
 // "color": '#ff9500',
 // "fontSize": '17px',
 // // "border": 'solid 1px #ff9500',
 // "borderRadius": '50px',
 // "padding": '5px 11px',
 // "backgroundColor": 'rgba(255, 255, 255, 0.1)'
 // }
 // }
 // ],
 // "area": {
 // "start": 0,
 // "end": 1
 // }
 // },
 });

 //获取url参数
 function getQueryVariable(variable)
 {
 var reg = new RegExp('(^|&)' + variable + '=([^&]*)(&|$)', 'i');
 var r = window.location.search.substr(1).match(reg);
 if (r != null) {
 return unescape(r);
 }
 return null;
 }

 </script>
</body>
</html></pre>
</div>
xgplayer.vue
web-view 有两种方式，直接 web-view 组件或者 plus.webview.create，这里使用 plus.webview.create（对于使用 webview 组件，可以自行查找）
<div class="cnblogs_code">
<pre><template>
</template>

<script>
export default {
 props:{
 src:{
 type:String,
 default:''
 }
 },
 data()
 {
 return{
 //视频地址
 // src:'http://vd2.bdstatic.com/mda-jmawcmkjagd8je0u/mda-jmawcmkjagd8je0u.mp4' 
 }
 },
 onBackPress()
 {
 //退出页销毁播放器
 uni.$xgplayer.close()
 },

 mounted()
 {
 this.xgplayer()
 },

 methods: {
 xgplayer()
 {
 let styles = {
 top: '0px',
 bottom: '540px',
 height: '256px',
 width: '100%',
 zindex:0,
 position: 'static',
 titleNView: {
 autoBackButton: true,
 backgroundColor: '#202028',
 titleColor: '#ffffff'
 } ,
 "statusbar": {
 "immersed": true ,//开启沉浸式状态栏 
 "background": '#202028'
 },

 "hardwareAccelerated" : true, //开启硬件加速
 "allowsInlineMediaPlayback": true,//ios关闭原生控件

 };
 const url = `/hybrid/html/xgplayer.html?src=${this.src}`
 // uni.$xgplayer = plus.webview.create('','xgplayer', styles, {}); //挂载到uni全局
 uni.$xgplayer = plus.webview.create(url,'xgplayer'); //挂载到uni全局
 uni.$xgplayer.setStyle({
 'videoFullscreen':'landscape-primary',//视频全屏时支持横屏 IOS 端无效
 });

 // uni.$xgplayer.loadURL("/hybrid/html/xgplayer.html?src="+this.src)

 uni.$xgplayer.show();
 }

 },
 }
</script>

<style>
</style></pre>
</div>
这样在 app 下就可以使用 xgplayer 播放视频了。
但是…… webview 是全屏的，如果你是在单独一个页面进行展示完全没有问题。
我的需求是在一个页面中嵌入视频播放，这就导致 webview 样式问题无法满足需求。
<h1 id="_label2">二、renderjs</h1>
上面一种方法行不通，那就使用新的方法——renderjs
renderjs 是一个运行在视图层的js。它比WXS更强大。它只支持app-vue和h5。（官方文档）
renderjs 的主要作用：
　　a、大幅降低逻辑层和视图层的通讯损耗，提供高性能的视图交互能力
　　b、在视图层操作dom，运行for web的js库
正好第二个作用是我的需求。最终结果也实现了。
基本使用是：
　　1、创建一个 script 片段，设置 lang 为 renderjs，module 根据自己需求设置
　　2、在视图层使用可以直接调用 renderjs 的操作
要注意的点：
　　a、H5下，renderjs 可以访问逻辑层的数据，app 下不能访问
　　b、逻辑层不能显示调用 renderjs 里面的函数，需要通过视图层间接调用，renderjs 可以通过 ownerInstance 调用逻辑层函数
基于以上的点，具体代码实现如下：
<div class="cnblogs_code">
<pre><template> 　　 // 视图层，通过监听绑定的值改变，调用 renderjs 的函数进行通信
<view class="media-box" :start="startPlayValue" :change:start="xgplayer.startPlay" >
 <view id="detail-video" :detail="detail" :change:detail="xgplayer.initJs"></view>
</view>
</template>

<script>
export default {
 data() {
 return {
 detail:{},
 startPlayValue:1
 }
 },
 onShow() {
 this.getDetail()
 },
 methods: {
 getDetail(){
 // 改变 detail，触发 xgPlayer.initJs（触发startPlay同理，改变 startPlayValue即可）
 },
 onPlay(){
 console.log('开始播放')
 }
 }
}
</script>
<script module="xgplayer" lang="renderjs">
let xgPlayer
export default{
 mounted(){
 },
 methods:{
 initJs(newDetail,old,ownerInstance,instance){
 if(newDetail && newDetail.type === 1){
 if (typeof window.Player === 'function') {
 this.initPlayer(newDetail,ownerInstance)
 } else {
 // 动态引入较大类库避免影响页面展示
 const script = document.createElement('script')
 // view 层的页面运行在根目录
 script.src = 'static/js/xgplayer.js'
 script.onload = this.initPlayer.bind(this,newDetail,ownerInstance)
 document.head.appendChild(script)
 }
 }
 },

 initPlayer(detail,ownerInstance){
 xgPlayer = new Player({
 id: 'detail-video',
 url: detail.avUrl,
 poster: detail.postUrl,
 fluid: true, // 自适应父级容器
 playbackRate: //传入倍速可选数组
 });

 // 第一次播放，调用逻辑层 onPlay
 xgPlayer.once('play',()=>{
 xgPlayer.pause()
 console.log('首次播放')
 ownerInstance.callMethod('onPlay')
 })
 },

 // 逻辑层通过改变 startPlayValue 来触发 renderjs 函数
 startPlay(){
 xgPlayer.play()
 }
 }
}
</script> </pre>
</div>
  
来源：https://www.cnblogs.com/zhurong/p/16380822.html

頁: [1]

琼殿技术论坛's Archiver

uni-app App 下集成 xgplayer