页面背景视频自动随机切换问题：视频结束后无法播放新随机视频

核心问题及修复点 #

• 视频loop属性阻止ended事件触发
  你在video标签中添加了loop属性，该属性会让视频播放结束后自动循环重播，导致ended事件永远不会触发。必须移除这个属性。

• 随机视频仅初始化一次
  randomitem变量只在页面加载时生成一次，后续调用newvideo始终使用同一个视频地址，自然不会切换新的随机视频。需要在每次视频结束时重新生成随机地址。

• 重复id与路径拼写错误
  HTML中video标签重复设置了id="intro"，不符合规范；视频9的路径写成了./meida/9.mp4，需修正为./media/9.mp4。

• 未清除旧source元素
  每次调用videoadd都会向video中添加新的source，导致元素内堆积多个source，可能引发播放异常。需先清除旧source再添加新的。

• 未使用参数的提示
  myHandler函数中的e参数未使用，直接移除即可消除提示。

修正后的代码 #

HTML部分

<div class="video-container">
    <video playsinline id="intro" autoplay muted></video>
</div>

JavaScript部分

var videos = [
    [{type:'mp4', 'src':'./media/1.mp4'}],
    [{type:'mp4', 'src':'./media/2.mp4'}],
    [{type:'mp4', 'src':'./media/3.mp4'}],
    [{type:'mp4', 'src':'./media/4.mp4'}],
    [{type:'mp4', 'src':'./media/5.mp4'}],
    [{type:'mp4', 'src':'./media/6.mp4'}],
    [{type:'mp4', 'src':'./media/7.mp4'}],
    [{type:'mp4', 'src':'./media/8.mp4'}],
    [{type:'mp4', 'src':'./media/9.mp4'}],
    [{type:'mp4', 'src':'./media/10.mp4'}],
    [{type:'mp4', 'src':'./media/11.mp4'}],
    [{type:'mp4', 'src':'./media/12.mp4'}],
    [{type:'mp4', 'src':'./media/13.mp4'}],
    [{type:'mp4', 'src':'./media/14.mp4'}],
    [{type:'mp4', 'src':'./media/15.mp4'}],
    [{type:'mp4', 'src':'./media/16.mp4'}],
];

// 每次调用生成新的随机视频地址
function getRandomVideoSrc() {
    var randomIndex = Math.floor(Math.random() * videos.length);
    return videos[randomIndex][0].src;
}

function videoadd(element, src, type) {
    // 清除旧的source元素
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    var source = document.createElement('source');
    source.src = src;
    source.type = type;
    element.appendChild(source);
}

function newvideo() {
    var vid = document.getElementById("intro");
    var randomSrc = getRandomVideoSrc();
    videoadd(vid, randomSrc, 'video/mp4');
    vid.autoplay = true;
    vid.load();
}

$(document).ready(function(){
    // 初始化播放第一个随机视频
    newvideo();

    document.getElementById('intro').addEventListener('ended', myHandler, false);
    
    // 移除未使用的e参数
    function myHandler() {
        // 视频结束后播放新的随机视频
        newvideo();
    }
})

内容的提问来源于stack exchange，提问作者Avanae