H5 Video播放時上一個視頻的聲音還在循環播放

 在項目中，遇到的這么一個現象，第一題的附件是視頻，第三題的附件是視頻時，視頻播放的同時，還能聽到第一題的視頻的聲音且還是循環播放，當整個面試結束出報表了，第一題的視頻的聲音還存在；重新面試，第一題的視頻的聲音還存在

視頻需要重新加載。

上網查了，綜合下來步驟如下：

第一步，要讓video標簽的地址置為空，重新加載。代碼如下：

//html

<video id="subjectVideo"

    class="video-js vjs-default-skin vjs-big-play-centered"

    autoplay controls 

    preload="auto" style="width: 100%; height: 100%;">

    <source :src="indexVue.activeQuestion.attachment" type="video/mp4">

        您的瀏覽器不支持 video 標簽。

</video>

 

//js

if(indexVue.activeQuestion.type == 'video'){
   var  video = document.getElementById('subjectVideo'); video.pause(); video.removeAttribute('src'); video.currentSrc = ''; video.innerHTML = '' video.load(); }

 第二種解決方案，去除標簽上的自動播放autoplay屬性，頁面通過js讓其加載后播放。

let timeId;
let count = 0;
var maxCount = indexVue.activeQuestion.readTime | 10;
timeId = setInterval(() => {
             var  video = document.getElementById('subjectVideo');
             if(count == 0){
                    video.load();
              }
             count += 0.5 ;
             if(video){
                    if(video.readyState == 4){ //等於4表示視頻已加載成功一部分，可以播放
                        if(video.paused){
                            video.play();
                            clearInterval(timeId);
                            timeId = null;
                        }
                    }
            }
           if(count >= maxCount ){
                    clearInterval(timeId);
                    timeId = null;
           }
 }, 500);　　

 

自從后沒有再遇到多余的聲音出現了。