如何在现有JS代码中实现点击封面播放YouTube ID数组内随机视频

核心修改逻辑 #

不需要大幅重构原有代码，只需要3处调整即可实现需求：

• 保留你已写好的随机抽取视频ID的逻辑，将其整合到播放器初始化的流程中
• 覆盖原有固定读取data-id的逻辑，替换为随机抽取的视频ID
• 可选：如果需要每次点击封面都更换随机视频，可额外调整初始化时机

具体修改步骤 #

1. 移除固定视频ID（可选，不删除也会被后续逻辑覆盖） #

把HTML中video标签的data-id属性删掉，原有代码：

<div class="video video-frame" data-id="-SiGnAi845o"></div>

修改为：

<div class="video video-frame"></div>

2. 顶部声明你的预设视频ID数组 #

在所有JS代码最开头添加你写的数组定义：

const videos = [
    '0dgNc5S8cLI',
    'mnfmQe8Mv1g',
    'CHahce95B1g'
];

3. 修改YouTube API就绪回调，注入随机ID #

找到onYouTubeIframeAPIReady方法，在调用addPlayer之前添加随机取ID的逻辑：

function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacket");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    // 新增：随机抽取视频ID
    const index = Math.floor(Math.random() * videos.length);
    frameContainer.dataset.id = videos[index];
    // 原有初始化逻辑不变
    videoPlayer.addPlayer(frameContainer);
}

到这一步就已经实现了每次页面加载时随机抽取一个视频播放的效果，刷新页面就会自动更换随机视频。

可选进阶：每次点击封面都换随机视频 #

如果需要每次点击封面都更换新的随机视频，只需要额外调整2处：

1. 修改videoPlayer模块，新增重置播放器的方法：

const videoPlayer = (function makeVideoPlayer() {
    let player = null;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100); // percent
    }

    // 修改addPlayer，支持直接传入videoId
    function addPlayer(video, videoId) {
        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            videoId: videoId || video.dataset.id,
            width: 640
        };
        config.playerVars = {
            autoplay: 0,
            cc_load_policy: 0,
            controls: 1,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            rel: 0
        };
        config.events = {
            "onReady": onPlayerReady
        };
        player = new YT.Player(video, config);
    }

    // 新增重置播放器方法
    function resetPlayer(video) {
        if (player) {
            player.destroy();
        }
        const index = Math.floor(Math.random() * videos.length);
        addPlayer(video, videos[index]);
    }

    function play() {
        player.playVideo();
    }
    return {
        addPlayer,
        play,
        resetPlayer // 暴露重置方法
    };
}());

2. 修改封面点击事件，点击时先重置播放器再播放：

(function initCover() {
    function coverClickHandler() {
        const frameContainer = document.querySelector(".video");
        videoPlayer.resetPlayer(frameContainer);
        // 加极短延迟等播放器初始化完成再播放，可根据实际情况调整
        setTimeout(() => videoPlayer.play(), 100);
    }
    const cover = document.querySelector(".jacket");
    cover.addEventListener("click", coverClickHandler);
}());

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