uniapp 音视频应用及注意事项

1.音频

uniapp 音频控制组件uni.createInnerAudioContext()

使用方法，建议在data声明创建，避免创建多个音频时闪退，单个音频可参考官方在script下直接创建，和import同级 

	export default {
		components: {
			draggable
		},
		data() {
			return {
				innerAudioContext: uni.createInnerAudioContext() // 创建音频播放
			
			}
		},
		onLoad(e) {
	
            // 音视频可同时播放
		    this.innerAudioContext.sessionCategory = 'ambient' 
		    // 结束监听事件建议写在onload，避免多次执行
			this.innerAudioContext.onEnded(() => {  
				console.log('init')
				
			});
            // 监听播放错误事件
			this.innerAudioContext.onError((res) => {
			
			})
            // 播放,可在具体逻辑需要时执行
             this.innerAudioContext.src = item.url;
		     this.innerAudioContext.play()
            // 监听播放开始
            this.innerAudioContext.onPlay(() => {             
                // 音频结束事件
				this.innerAudioContext.stop()
                // 销毁,可在beforeDestroy执行
                // this.innerAudioContext.destroy()
			
			})
    }

2.视频

uniapp视频播放器uni.createVideoContext(videoId, this) 

video视频播放，隐藏控制，具体可参考文档

<video :src="src" style="width: 100%;height: 100vh;"
	   id="videoPlay" :autoplay="true" :loop="false" :enable-progress-gesture="false" 
       :show-fullscreen-btn="false"
		:show-play-btn="false" :controls="false" :show-center-play-btn="false"
		@ended="() => {$emit('playEnd')}">		
</video>

 该组件在视频做背景时APP会有层级过高的问题

解决方案

1.cover-view或者cover-image，放在video标签内使用，适用于内容少的，比如添加单个按钮

<video style="position: relative;" src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
			<cover-view style="width: 100px;height: 100px;background-color: #fff;position: absolute;left: 0;"></cover-view>
		</video>

2.subnvue 创建原生子窗体，放在当前页面下，放好位置即可。

3.plus.nativeObj.View()  绘制原生画布，有点击事件。不属于dom，可以覆盖webview和各种原生控件

由于使用场景中视频上需要拖拽其他元素，以上仅作为参考

4.插件

插件的主要逻辑是使用view标签用v-html 在初始化是替换为video标签，可直接在官方下载，建议使用第二个ls-dom-video