项目中用h5开发,用hBuilder分别打包安卓和ios,测试发现安卓使用video标签正常播放视频,而ios则播放失败,后又几经折腾,还是没效果,所以采用html5的API
VideoPlayer plus.video.createVideoPlayer(id, styles);
具体方法如下:
(会以webview的方式来展示视频)具体其他配置项可参考官网:HTML5+ API Reference
html部分
<div class="video-name-list">
<div
class="video-name"
v-for="(i, index) in form.videoList"
:key="index"
@click="playVideo(i)">
{{ i.fileName }}
</div>
</div>
js部分
注意:webview和player需要再data中声明
//关闭webview和video
closeVideo() {
this.player.close()
plus.webview.close('video')
// plus.webview.close(this.webview)
},
playVideo(i) {
const that = this
this.webview = null
//创建webview
this.webview = plus.webview.create('video', {
titleNView: {
backgroundColor: '#ffffff',
titleText: '视频播放',
titleColor: '#333333',
autoBackButton: false,
buttons: [{ type: 'close', onclick: that.closeVideo }]
},
background: '#333333'
})
this.webview.show()
//创建视频
this.player = plus.video.createVideoPlayer('videoplayer', {
src: `${this.baseUrl}/attache/downLoad/${i.id}`,
top: '220px',
left: '0px',
width: '100vw',
height: '200px',
position: 'static',
direction: 0
// loop: true
})
// 视频挂载到webview上
this.webview.append(this.player)
},
playVideo(i) {
const that = this
this.webview = null
//创建webview
this.webview = plus.webview.create('video', {
//配置参数
titleNView: {
backgroundColor: '#ffffff',
titleText: '视频播放',
titleColor: '#333333',
autoBackButton: false,
buttons: [{ type: 'close', onclick: that.closeVideo }]
},
//整体webview背景色
background: '#333333'
})
this.webview.show()
//创建视频
this.player = plus.video.createVideoPlayer('videoplayer', {
src: `${this.baseUrl}/attache/downLoad/${i.id}`,
top: '220px',
left: '0px',
width: '100vw',
height: '200px',
position: 'static',
direction: 0
// loop: true
})
// 视频挂载到webview上
this.webview.append(this.player)
},
//关闭webview和video
closeVideo() {
this.player.close()
plus.webview.close('video')//这俩种关闭方式任意都可以
// plus.webview.close(this.webview)
},