problem description

recently, I am writing a web version of Douyin, but when Android phones slide from the first video to another video, it will go blank with sound but no image

the environmental background of the problems and what methods you have tried

mui plug-in is used

related codes

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 class="prize">"+tem["prize"]+"
</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("-sharpplayid_"+index).play();
//        });
    }
}

what result do you expect? What is the error message actually seen?

Slide Video Click play Slide the second video has sound but no image