项目中用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)
		},

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐