uni-app中如何实现xgplayer插件集成？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1566个文字，预计阅读时间需要7分钟。
前言：如果是Web下集成xgplayer，是非常方便的，直接按照官方文档操作即可，这里不做讨论。至于app下，原因在于uni-app app下调用这类JS库涉及到操作DOM，就需要特殊处理。在
前言如果是 Web 下集成 xgplayer 是很方便的，直接按照官方文档就可以，这里就不做讨论。
之所以是讲 app 下，原因在于 uni-app app 下调用这类 JS 库涉及到操作 dom 的就需要特殊出来。
在最开始按照 web 方式集成进来一直报错，一点头绪没有，经过几天摸索加上咨询找到了一些方式。
主要的解决方案有以下两张：
1、uni-app 的 renderjs 实现
2、webview 实现
一、webviewweb-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/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[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:'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>
本文共计1566个文字，预计阅读时间需要7分钟。
前言：如果是Web下集成xgplayer，是非常方便的，直接按照官方文档操作即可，这里不做讨论。至于app下，原因在于uni-app app下调用这类JS库涉及到操作DOM，就需要特殊处理。在
前言如果是 Web 下集成 xgplayer 是很方便的，直接按照官方文档就可以，这里就不做讨论。
之所以是讲 app 下，原因在于 uni-app app 下调用这类 JS 库涉及到操作 dom 的就需要特殊出来。
在最开始按照 web 方式集成进来一直报错，一点头绪没有，经过几天摸索加上咨询找到了一些方式。
主要的解决方案有以下两张：
1、uni-app 的 renderjs 实现
2、webview 实现
一、webviewweb-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/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[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:'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>