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

#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-WEIXINplayorpause(e){//视频暂停播放var video_=ethis.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].idlet videoContentid = uni.createVideoContext(changeId);videoContentid.seek(0)videoContentid.play()this.play=truethis.muted=falsethis.index++},playing(e) {let currentId =  e; // 获取当前视频idthis.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=thisif(this.index===0){this.auto_play=true}},mutedFalse(){this.muted=false},Like(){this.islike=1},Dislike(){this.islike=0}// #endif

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

微信浏览器video标签没有封面_微信h5页面video标签用法总结
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
<video :src="url" controls id="videoId" @play="play"@fullscreenchan ...
uniapp H5使用video标签直播失败报错
vscode 远行到浏览器可以正常播放,uniapp一直报错代码如下 <template><div class="home"><div class= ...
uniapp使用video标签无法播放视频出现黑屏问题处理
uniapp使用video标签无法播放视频出现黑屏问题处理问题出现情况并且点击播放后出现报错解决办法问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使 ...
如何将uni-app中video标签播放按钮隐藏
uni-app中video标签播放按钮隐藏的坑... 项目需求是将视频放在展示列表上,刚开始的思路是直接将视频的首帧截取出来放在列表上,后来发现此方法实在太过麻烦.于是直接使用了video标签,将视频 ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
video标签poster属性在安卓微信中不生效问题解决
video标签poster属性在安卓微信中不生效问题解决参考文章: (1)video标签poster属性在安卓微信中不生效问题解决 (2)https://www.cnblogs.com/shicha ...
微信浏览器video标签没有封面_织梦百度小程序微信小程序video标签不支持视频封面，autoplay等问题修复方法...
在现有的百度小程序富文本组件bdParse,以及微信小程序富文本组件wxParse,对于video的标签解析仅仅只是有个video而已,其他的属性几乎都过滤掉了,所以就需要我们假设对于属性(由于H5的 ...
video标签设置了autoplay，自带音频的视频在谷歌浏览器仍无法自动播放
原因分析:谷歌浏览器可以自动播放视频,不能自动播放音频.如果视频中自带音频就会导致该视频无法自动播放. 解决办法:在video标签加上静音属性muted,自带音频的视频就可以自动播放了,但是该视频无声 ...

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

uniapp video原生控件autoplay属性

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

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

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

最新文章

热门文章