在元素'上随机播放youtube视频;的背景

Playing youtube video randomly on element's background

本文关键字：youtube 视频 背景 播放 元素 随机      更新时间：2023-09-26

目前，我正在使用这个jquery，它可以获取youtube视频并在元素的背景中播放。

我被提供了这个代码，将播放单一的youtube视频。但我想列出一个视频列表，然后随机播放。。。我现在不太擅长Javascript，所以我真的很感激在这方面的帮助。。。

现在我有这个。。。。

我想列出一个视频列表，然后像播放列表一样随机播放。。

$(function() 
{ 
    var videos = ['xJvt2SDV7ck', 'x6DD1k4BAUg', 'xJvt2SDV7ck'];
    var index = Math.floor(Math.random() * videos.length);
    var Video_back = new video_background($("#bgvideo"), 
    {
        "position": "absolute", //Stick within the div
        "z-index": "-1",        //Behind everything
        "loop": true,           //Loop when it reaches the end
        "autoplay": true,       //Autoplay at start
        "muted": true,          //Muted at start
        "youtube": "videos[index]",   //Youtube video id
        "start": 0,                 //Start with 6 seconds offset (to pass the introduction in this case for example)
        "video_ratio": 1.333,      // width/height -> If none provided sizing of the video is set to adjust
        "fallback_image": "videos/main.jpg",    //Fallback image path
    });
});

目前它只播放从列表中随机选择的1个视频（单循环）。我想制作它，以便在第一个视频结束时转到另一个视频。。

我们将非常感谢您的帮助！谢谢你抽出时间！

以下答案基于这样一个事实，即无法确定视频何时完成。长度以毫秒为单位：

$(function() 
{ 
    var videos = 
    [ 
        { id : 'xJvt2SDV7ck', length : 60000 },
        { id : 'x6DD1k4BAUg', length : 125000 },
        { id : 'xJvt2SDV7ck', length : 166000 }
    ];
    function playNext()
    {
        var index = Math.floor(Math.random() * videos.length);
        alert( "Playing next movie => " + videos[index].id );
        var Video_back = new video_background($("#bgvideo"), 
        {
            "position": "absolute", //Stick within the div
            "z-index": "-1",        //Behind everything
            "loop": true,           //Loop when it reaches the end
            "autoplay": true,       //Autoplay at start
            "muted": true,          //Muted at start
            "youtube": videos[index].id,   //Youtube video id
            "start": 0,                 //Start with 6 seconds offset (to pass the introduction in this case for example)
            "video_ratio": 1.333,      // width/height -> If none provided sizing of the video is set to adjust
            "fallback_image": "videos/main.jpg",    //Fallback image path
        });
        setTimeout(function() 
        {
            playNext();
        }, videos[index].length);
    }
    playNext();
});
相关文章：