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

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 结尾。

  1. #ifdef:if defined 仅在某平台存在
  2. #ifndef:if not defined 除了某平台均存在
  3. %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
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值