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

最新推荐文章于 2025-04-02 15:58:00 发布

北冰洋_

最新推荐文章于 2025-04-02 15:58:00 发布

阅读量6.2k

点赞数 3

文章标签： uni-app viewer 组件化

本文链接：https://blog.csdn.net/weixin_48156531/article/details/121289829

版权

该博客探讨了uniapp中video组件在H5和App端使用autoplay属性时遇到的问题。由于浏览器限制，H5端无法自动播放视频，但可以通过添加muted属性实现静音播放。作者提出了两种解决方案：一是不加muted属性，让用户手动播放；二是添加muted属性并提供静音图标供用户切换声音。对于App端，autoplay属性则正常工作。博客还展示了如何使用条件编译处理跨端兼容问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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