让 YouTube 播放数组中的随机视频

Question

我怎样才能在代码中完成这项工作？

或者为了使其能够在代码中工作，是否会以不同的方式编写？

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

var index=Math.floor(Math.random() * videos.length);

代码的设置方式是，您单击打开视频的封面。

https://jsfiddle.net/e4bg537p/

我如何设置它才能播放一组 YouTube ID 中的 1 个随机视频？

这就是我正在想办法做的事情。

谁能告诉我怎么做？

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

    (function manageCover() {

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const video = cover.parentElement.querySelector(".wrap");
        show(video);
    }

    const cover = document.querySelector(".jacket");
    cover.addEventListener("click", coverClickHandler);
}());

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
    }

    function addPlayer(video) {

        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            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 play() {
        player.playVideo();
    }
    return {
        addPlayer,
        play
    };
}());

function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacket");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function initCover() {

    function coverClickHandler() {
        videoPlayer.play();
    }

    const cover = document.querySelector(".jacket");
    cover.addEventListener("click", coverClickHandler);
}());

Answer 1

添加一个函数，在其余脚本触发之前初始化视频帧的 data-id 属性：

(function init(){
    var videos = [
        '0dgNc5S8cLI',
        'mnfmQe8Mv1g',
        'CHahce95B1g'
   ];
   var v = videos[Math.floor(Math.random()*videos.length)];
   document.querySelector('.video.video-frame').setAttribute('data-id', v);
}());

(function manageCover() {
    //...
})

Answer 2

[EDIT] 误解了问题...这个方法是如果你想让它继续播放随机视频...

一种方法是使用onStateChange事件：

https://jsfiddle.net/vanowm/14q05ozd/

var videos = [
    '0dgNc5S8cLI',
    'mnfmQe8Mv1g',
    'CHahce95B1g'
];
var videosRand = [];

    function addPlayer(video) {

        function onStateChange(e)
        {
          if (e.data)
            return;

          //copy list of videos and remove last played id so it doesn't play again
          if (!videosRand.length)
            videosRand = videos.filter(a => a != player.getVideoData().video_id);

          //get random index and remove the id from the array
          const id = videosRand.splice(~~(Math.random() * videosRand.length), 1)[0];
console.log(id);
          player.loadVideoById(id);
        }
        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            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,
            "onStateChange": onStateChange
        };
        player = new YT.Player(video, config);

    }

让 YouTube 播放数组中的随机视频

Having YouTube play a random video from an array

javascript

arrays

random

youtube-api