Uniapp video标签autoplay不生效问题（进入页面瞬间）

uniapp video原生控件autoplay属性如果是在h5端，走的是浏览器，浏览器不支持进入页面就播放视频，谷歌、火狐之类的都不支持，但是推出可以静音自动播放视频，例如<video :id="item.id" :src="item.url" :loop="loop" :autoplay="auto_play":enable-progress-gesture="false" :contr

北冰洋_

5851人浏览 · 2021-11-12 16:24:30

北冰洋_ · 2021-11-12 16:24:30 发布

uniapp video原生控件autoplay属性

如果是在h5端，走的是浏览器，浏览器不支持进入页面就播放视频，谷歌、火狐之类的都不支持，但是推出可以静音自动播放视频，例如

<video :id="item.id" :src="item.url" :loop="loop" :autoplay="auto_play"  :enable-progress-gesture="false" :controls="controls" @play="playing(item.id)" @click="playorpause(item.id)"></video>

这样很明显是不能自动播放视频的，但是要是给video标签加上muted属性就可以自动播放，例如

<video :id="item.id" :src="item.url" :loop="loop" :muted="muted" :autoplay="auto_play"  :enable-progress-gesture="false" :controls="controls" @play="playing(item.id)" @click="playorpause(item.id)"></video>

亲测好使。

但是问题又来了，静音播放肯定顶不住，既然人家浏览器有要求，那就只能找折中的办法

1，不加muted属性，进入页面让用户点击播放视频（不建议）
2，加上muted属性，进入页面给一个静音图标，然后点击静音图标让视频有声音（推荐）

还有，如果不用h5端，直接用app端打开的话，autoplay属性还是可以的

这样的话就要解析代码走的是h5端还是app端，那就需要了解跨端兼容的问题了。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
html中：

<!-- #ifdef APP-PLUS -->
		<view class="next_app">
			<view class="video_item" v-for="item in videoList" :key="item.id" :item-id="item.id">
				<view class="video_item_video">
					<video :id="item.id" :src="item.url" :loop="loop"  :autoplay="true"  :enable-progress-gesture="false" :controls="controls"></video>
				</view>
			</view>
		</view>
		<!-- #endif -->

js中：

// #ifdef H5 || MP-WEIXIN
			playorpause(e){
				//视频暂停播放
				var video_=e
				this.videoContext=uni.createVideoContext(video_)
				
				if(this.index==0){
					if(this.play===true){
						this.videoContext.play()
						this.play=false
					}else{
						this.videoContext.pause()
						this.play=true
					}
				}else{
					if(this.play===false){
						this.videoContext.play()
						this.play=true
					}else{
						this.videoContext.pause()
						this.play=false
					}
				}
				
			},
			changeItem(e){
				//视频滑动
				let changeId=this.videoList[e.detail.current].id
				let videoContentid = uni.createVideoContext(changeId);
				videoContentid.seek(0)
				videoContentid.play()
				this.play=true
				this.muted=false
				this.index++
			},
			playing(e) {
				let currentId =  e; // 获取当前视频id
				this.videoContent = uni.createVideoContext(currentId);
				let trailer = this.videoList;
				trailer.forEach(function(item, index) { // 获取json对象并遍历, 停止非当前视频
					if (item.url != null && item.url != "") {
						let temp = item.id;
						if (temp != currentId) {
							uni.createVideoContext(temp).pause(); //暂停视频播放事件
						}
					}
				})
				// this.mutedFalse()
				
			},
			atuo(){
				//首个视频自动播放
				var that=this
				if(this.index===0){
					this.auto_play=true
				}
			},
			mutedFalse(){
				this.muted=false
			},
			Like(){
				this.islike=1
			},
			Dislike(){
				this.islike=0
			}
			// #endif