如何让一段视频在页面上随机播放而不重复？

Question

在带有 vanilla javascript 的网络浏览器中，我已经让视频随机播放了。我有 6 个视频的列表，我希望列表中的每个视频随机播放，直到 6 个视频的列表结束然后重新开始时才重复播放。这是代码：

function refreshbutton(){
var count = Math.floor(Math.random() * videos.length);
document.getElementsByTagName('source')[0].src = "./videos/" + videos[count];video.load();}
var videos= ["video1.mp4","video2.mp4","video3.mp4"];

<i onclick="refreshbutton();" class="brefreshbutton fa fa-refresh fa-spin" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" title="Watch another video"></i>

<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.6" loop="" autoplay="">
<source src="" type="video/mp4">
<script type="text/javascript">
  var videos2 = [
  'video4.mp4',
  'video5.mp4',
  'video6.mp4'
  ];
  var count = Math.floor(Math.random() * videos2.length);
  document.getElementsByTagName('source')[0].src = './videos/' + videos2[count];
  </script>
</video>

Answer 1

每当单击 刷新按钮 时，您都会使用 videos[count] 获得视频名称，然后使用 FOR 循环检查是否相同视频 URL 存在于“alreadyPlayedVideos”数组中。
如果它存在（将重复），您只需再次运行函数 refreshbutton(); 即可获得新计数。

未经测试的代码，但可以从中学习逻辑：

<i onclick="refreshbutton()" class="brefreshbutton fa fa-refresh fa-spin" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" title="Watch another video"></i>

<div class="video-fallback">

    <video id="video" onloadstart="this.volume=0.6" loop="" autoplay="">
    <source src="" type="video/mp4">
    </video>

</div>

<script type="text/javascript">

var videos = ["video1.mp4", "video2.mp4", "video3.mp4", 'video4.mp4', 'video5.mp4', 'video6.mp4'];
var videosPlayed = [];
var count = 0; 
var count_prev = 0;
var count_playlist = 0;

var myVid = document.getElementById("video");

//# loading first video
refreshbutton();

function getRandomVideoNum()
{
    count = Math.floor( Math.random() * videos.length );
    
    //# checking for sequential duplicate values...
    if( count == count_prev ) { getRandomVideoNum(); }
    
    //# checking if "Played" list has ended, then reset that list with new random videos
    if( videosPlayed.length == videos.length)
    { console.log( "### full playlist... doing reset"); videosPlayed.length = 0; getRandomVideoNum(); }
    
    //# check if already played...
    for(var i=0; i < (videosPlayed.length-1); i++)
    {
        //# has been already played so re-run function for a new "count" value
        if( videosPlayed[i] == videos[count] ) { getRandomVideoNum(); }
    }
    
    count_prev = count; //# update for top checking of duplicate values
}

function refreshbutton()
{
    getRandomVideoNum(); //# get a new "count" value

    //# update the "already played" list
    videosPlayed[ (videosPlayed.length) ] = videos[count];
    
    //# set "src" then "load" to ready video for "play" command
    myVid.src = "./video/" + videos[count];
    myVid.load(); myVid.play();
    
    /*
    //# if you want feedback / logging
    if( videosPlayed.length == videos.length )
    {
        count_playlist++; //# add +1 to "just played" playlist number 
        
        console.log( 
        "## ==================================" +
        "\n" + ">> Playlist num : " + count_playlist +
        "\n" + ">> videos.length : " + videos.length +
        "\n" + ">> the items were : " +
        "\n" + "vidplayed 0 : " + videosPlayed[0] +
        "\n" + "vidplayed 1 : " + videosPlayed[1] +
        "\n" + "vidplayed 2 : " + videosPlayed[2] +
        "\n" + "vidplayed 3 : " + videosPlayed[3] +
        "\n" + "vidplayed 4 : " + videosPlayed[4] +
        "\n" + "vidplayed 5 : " + videosPlayed[5] +
        "\n" + "===================================="
        );
    }
    */

}

</script>

如何让一段视频在页面上随机播放而不重复？

How to make a random video play on a page without repeating?

random

video