问题描述

最近在写网页版抖音但是安卓手机从第一个视频滑动到别的视频的时候就会变空白 有声音没图像

问题出现的环境背景及自己尝试过哪些方法

使用了mui插件

相关代码

function getjson(page,file)
{
           var slidewrapper=document.querySelector(".slidewrapper");
             if(page==1)
             {
                   slidewrapper.innerHTML='';
             }
             
      var p = 1
      var addlist = []
      mui.ajax(file+".json",{
              data:{},
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            success:function(data)
            {
               if(data.code=="000000")
               {
                      var arr=data.list
//                      console.log(arr)
                      
                       mui.each(arr,function(index,tem)
                       {
                              var article=document.createElement("article");
                                  article.className="slide";
                                  article.style.backgroundImage='url('+tem["vimg"]+')';
                                  article.innerHTML='<div class="videoTop clearfix">'+tem["title"]+'<img class="sharebtn" onclick="share()" src="../img/share.png"/></div><div class="videodiv" id="videonum'+tem["id"]+'" data-url="'+tem["video"]+'" data-img="'+tem["vimg"]+'"><div class="spinner"><span class="mui-spinner"></span><span class="ltxt">加载中...</span></div><img src="ico/play.png?p=12" class="play" /><div class="proimg" data-url="'+tem["proimg"]+'"><img src="'+tem["proimg"]+'"></div><div class="user_name"><p class="name line1">@'+tem["username"]+'</p><p class="prize">￥'+tem["prize"]+'</p></div></div><div class="user_posi"><div class="right_user"><div class="userhead" onclick="jump()"><a href="zhuye.html"><img id="imgaa" src="'+tem["head"]+'" alt="" /></a><span class="useradd">+</span></div><div class="right_ico like" onclick="like('+tem["id"]+')"><img src="ico/live.png" /><span id="'+tem["id"]+'">'+tem["live"]+'</span></div><div class="right_ico" onclick="getpreview('+tem['id']+')"><img src="../img/message.png" /><span>'+tem["message"]+'</span></div><div class="right_ico" "><img src="../img/share.png" /><span>'+tem["share"]+'</span></div></div></div>';
                                  slidewrapper.appendChild(article);
                                  setVideo(index);
                       });
                       
                       fss.reloadSlides();
                          if(page==1)
                    { //第一次加载，让第一个视频播放
                         setVideo(0);
                    }
               }
            },
            error:function(xhr,type,errorThrown)
            {
                 mui.toast("~网络连接失败~");
            }
        });
        
}

function setVideo (index) {
        var videodiv=document.querySelectorAll(".videodiv");
        if(videodiv[index] && !videodiv[index].querySelector("video"))
        {
            var vidsrc = videodiv[index].getAttribute("data-url")
        
            var vid=document.createElement("video");
            var wid1 = $(document).width()
            vid.className="video";
            vid.poster=videodiv[index].getAttribute("data-img");
              vid.setAttribute("id","playid_"+index);
              vid.setAttribute("preload","auto");
              vid.setAttribute("width",wid1);
              vid.setAttribute("controlslist","nodownload");
              vid.setAttribute("x5-video-player-type","h5");
              vid.setAttribute("loop","loop");
              vid.setAttribute("x5-video-orientation","portraint");
              vid.src = videodiv[index].getAttribute("data-url");
              videodiv[index].appendChild(vid);
              vid.load();
            var myPlayer = videojs("playid_"+index).ready(function(){
        
                this.width("100%");
                //绑定视频播放结束事件
                this.on("ended", function(){
                });
                this.play();
                
            });
            vid.addEventListener("canplaythrough", function(){
//                    alert(vid);
                });
        }else if(videodiv[index]){
          videodiv[index].querySelector(".play").style.opacity=0;
          videodiv[index].querySelector("video").currentTime=0;
          videodiv[index].querySelector("video").play();
          $('.user_posi').show()
//        weixinPlay(function() {
//            document.querySelector('#playid_'+index).play();
//        });
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

滑动视频点击播放 滑动第二个视频有声音没图像