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

最新推荐文章于 2024-06-02 00:39:37 发布

哈哈西西）

最新推荐文章于 2024-06-02 00:39:37 发布

阅读量1.5k

点赞数

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/125143319

版权

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" >
             
                  <video
                    controls="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-playsinline
                    webkit-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 = this
          if (res.code == 200) {
            if (res.result != null) {
               this.photoAddrList = res.result.timeDatas
               this.photoTotal = res.result.total
               this.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.videoDivRef
                      console.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)
                  })
                }
              }
            }