uni-app APP 下集成 xgplayer
uniapp 使用 uni-upgrade-center
前言
如果是 Web 下集成 xgplayer 是很方便的，直接按照官方文档就可以，这里就不做讨论。
之所以是讲 app 下，原因在于 uni-app app 下调用这类 JS 库涉及到操作 dom 的就需要特殊出来。
在最开始按照 web 方式集成进来一直报错，一点头绪没有，经过几天摸索加上咨询找到了一些方式。
主要的解决方案有以下两张：
1、uni-app 的 renderjs 实现
2、webview 实现
一、webview
web-view 作为一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。（官方文档）
从上面这句话的介绍可以看出：
1、用来承载网页
2、会自动铺满
基于这两个特点，要实现的话基本思路是：
a、新建一个 html 页面，在这里使用 xgplayer
b、新建一个vue或者nvue页面，用 web-view 加载这个 html 页面
按照这个思路主要代码如下：
xgplayer.html
<!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>
<!-- <script src="js/uni.webview.1.5.2.js" charset="utf-8"></script> -->
<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>
<!-- uni 的 SDK，必须引用。 -->
<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/[email protected]/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[2]);
}
return null;
}
</script>
</body>
</html> xgplayer.vue
web-view 有两种方式，直接 web-view 组件或者 plus.webview.create，这里使用 plus.webview.create（对于使用 webview 组件，可以自行查找）
<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> 这样在 app 下就可以使用 xgplayer 播放视频了。
但是…… webview 是全屏的，如果你是在单独一个页面进行展示完全没有问题。
我的需求是在一个页面中嵌入视频播放，这就导致 webview 样式问题无法满足需求。
二、renderjs
上面一种方法行不通，那就使用新的方法——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 调用 逻辑层函数
基于以上的点，具体代码实现如下：
<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: [0.5, 0.75, 1, 1.5, 2, 2.5, 3] //传入倍速可选数组
});
// 第一次播放，调用逻辑层 onPlay
xgPlayer.once('play',()=>{
xgPlayer.pause()
console.log('首次播放')
ownerInstance.callMethod('onPlay')
})
},
// 逻辑层通过改变 startPlayValue 来触发 renderjs 函数
startPlay(){
xgPlayer.play()
}
}
}
</script>