Uniapp video标签autoplay不生效问题(进入页面瞬间)
uniapp video原生控件autoplay属性如果是在h5端,走的是浏览器,浏览器不支持进入页面就播放视频,谷歌、火狐之类的都不支持,但是推出可以静音自动播放视频,例如<video :id="item.id" :src="item.url" :loop="loop" :autoplay="auto_play":enable-progress-gesture="false" :contr
·
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
更多推荐
已为社区贡献4条内容
所有评论(0)