微信浏览器自动播放多个视频黑屏，h5video，videojs

bug描述：
在谷歌浏览器自带的控制台调试可以正常播放视频，安卓手机自带浏览器可以自动播放视频，但是在微信浏览器无法自动播放。
h5中自动播放多个video，出现黑屏情况，并且无法点击到视频组件
如图所示

原因：微信自带浏览器为了减少消耗关闭了自动播放

解决bug

<div  class="mobilevideoCenter" v-if="dialogMobileVideoVisible"><div class="photoCenter"><div class="demo-image"><div class="photoflex"> <div class="videoBlock" v-for="(fit,index) in photoAddrList" :key="index" ref="videoDivRef" v-if="mobilePhotoType == 3" ><videocontrols="controls"class="video-js vjs-default-skin vjs-big-play-centered" preload="none" object-fit='fill'style="width: 100%; height: 90%"x-webkit-airplay="allow"x5-video-player-type="h5" x5-playsinlinewebkit-playsinline playsinline></video> <div class="photoText">{{ fit.time }}</div></div></div></div></div></div>

//要引入videojs组件import videojs from "video.js"

  getPhotoAndVideBySid(this.photoParam).then( (res)=>{let that = thisif (res.code == 200) {if (res.result != null) {this.photoAddrList = res.result.timeDatasthis.photoTotal = res.result.totalthis.pageKey++if(this.photoTotal > 0){for (let i = 0; i < this.photoAddrList.length ; i++) {let iterator = this.photoAddrList[i];getVideoIoStream( {path: iterator.address}).then((res)=>{let  blob = new Blob([res])let photo = window.URL.createObjectURL(blob)let videoDiv = this.$refs.videoDivRefconsole.log(videoDiv[i])that.ioVideoPlayer[i] = videojs(videoDiv[i].childNodes[0], {bigPlayButton: false,textTraceDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,preload: true,//移动端不能自动播放，需要点击播放bigPlayButton: this.isMobile,//点击播放按钮autoplay:true,//自动播放controls: true,//播放控件sources:[{src: photo,type: "video/mp4"}]})that.ioVideoPlayer[i].play();that.photoUrl.push(photo)}) .catch(err => {this.$message.error(err.message)console.log(err)})}}}

最终效果

微信浏览器自动播放多个视频黑屏，h5video，videojs相关推荐

通过howler.js实现在Android下的微信浏览器自动播放音频
howler.js是一个把webaudio进行封装的一个js库,通过它可以轻松的对音频文件进行控制播放.暂停.甚至指定播放音频中的某个片段.以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题, ...
[Flask]解决Flask用video标签播放不了视频黑屏的问题
文章目录一.原因二.修改步骤总结一.原因播放不了的原因是视频文件没有按照Flask框架要求来进行存放,所以我们要将视频文件存储在static文件夹下才行. 二.修改步骤原先代码: < ...
html背景mov,科技常识：html5自动播放mov格式视频的实例代码
今天小编跟大家讲解下有关html5自动播放mov格式视频的实例代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5自动播放mov格式视频的实例代码的相关资料,希望小伙伴们看了有 ...
Firefox 66 将阻止自动播放音频和视频
百度智能云云生态狂欢季热门云产品1折起>>> 当我们点击一个链接,或者打开新的浏览器选项卡时,浏览器就开始自动播放视频和声音,这是一件十分烦人的事.Chrome 浏览器早已对 ...
[css] 如何隐藏没有静音、自动播放的音视频？
[css] 如何隐藏没有静音.自动播放的音视频? 浏览器已禁止打开页面时自动播放,可以用iframe先播触发播放权限,然后再播放做一个opacity:0 的假隐藏个人简介我是歌谣,欢迎和大家一起 ...
html怎样自动播放视频,html5自动播放mov格式视频的实例代码
这个不算啥新奇吧?但还是记录一下. 这个问题应该这么看. 1.首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件. 如何识别?设置MIME类型.以IIS为例.除了可以在IIS界面上直 ...
迪士尼源码_如何在迪士尼+上禁用自动播放和背景视频
迪士尼源码 Just like Netflix, Disney+ makes it easy to binge-watch a show by automatically playing the ne ...
微信浏览器 MP4播放失败，安卓下微信浏览器不能播放MP4问题的解决,gzip捣的鬼
今天遇到一个很奇葩的事,MP4视频在安卓的微信浏览器中播放不了,提示"微信浏览器 MP4播放失败" 但是在其他手机浏览器里可以播放,而且苹果的微信中也可以播放最后研究了一下午,找 ...
HTML网站微信打开自动播放音乐JS
源码简介: HTML网站微信打开自动播放音乐JS,众所周知网站里面的bgm在微信是不能自动播放的,好像是因为浏览器内核限制禁止自动播放,具体也不清楚,经过我的测试这个代码确实可以修复微信不自动播放音乐 ...
解决苹果ios端微信无法自动播放H5页面背景音乐
最近做微信H5页面开发的时候,在页面加入背景音乐,并且设置自动播放. 在PC端模拟手机时是可以正常显示播放的,在安卓端微信上也可以正常播放,然后到苹果端微信就不能正常播放了. 找了许久的原因是苹果io ...

微信浏览器自动播放多个视频黑屏，h5video，videojs

微信浏览器自动播放多个视频黑屏，h5video，videojs相关推荐

最新文章

热门文章