H5 Video播放时上一个视频的声音还在循环播放

 在项目中，遇到的这么一个现象，第一题的附件是视频，第三题的附件是视频时，视频播放的同时，还能听到第一题的视频的声音且还是循环播放，当整个面试结束出报表了，第一题的视频的声音还存在；重新面试，第一题的视频的声音还存在

视频需要重新加载。

上网查了，综合下来步骤如下：

第一步，要让video标签的地址置为空，重新加载。代码如下：

//html

<video id="subjectVideo"

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

    autoplay controls 

    preload="auto" style=" 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);　　

 

自从后没有再遇到多余的声音出现了。