单击按钮后播放随机视频

Question

我首先要说我对JS不好，但我仍在尝试学习。

我有10个mp4，我需要在一次按钮点击后随机播放一个。我无法实现它，我一直在寻找解决方案，但无济于事。

这是我到目前为止的内容：

HTML

<div class="videoHolder">
    <video id="video" autoplay muted>
    Your browser does not support the video tag.
    </video>
</div>
<button type="button" name="button">Push to Play</button> 

JS

var videos = [
    "mp4s/video1.mp4",
    "mp4s/video2.mp4",
    "mp4s/video3.mp4",
    "mp4s/video4.mp4",
    "mp4s/video5.mp4",
    "mp4s/video6.mp4",
    "mp4s/video7.mp4",
    "mp4s/video8.mp4",
    "mp4s/video9.mp4",
    "mp4s/video10.mp4",
];

var videoId = 0;
var elemVideo = document.getElementById('video');
var elemSource = document.createElement('source');
elemVideo.appendChild(elemSource);

elemVideo.addEventListener('ended', play_next, false);


function play_next() {
    if (videoId == 10) {
        elemVideo.stop();
    } else {
        video.pause();
        elemSource.setAttribute('src', videos[videoId]);
        videoId++;
        elemVideo.load();
        elemVideo.play();
    }
}
play_next();
</script>

不幸的是，这并没有满足我的需求。此代码将在页面加载时依次播放所有10个视频，然后停止。当有人按下“一键播放”按钮时，我只需要播放10个随机视频之一即可。我需要它来继续10。

就像我说的那样，我对JS一点都不满意，我可以通过浏览和修改它来找到这段代码。

Answer 1

这应该为您工作。

<div class="videoHolder">
    <video id="video" autoplay muted src="">
    </video>
</div>
<button id='playRandom' type="button" name="button">Push to Play</button>

这是您想要的一个非常基本的实现

var videos = [
    "mp4s/video1.mp4",
    "mp4s/video2.mp4",
    "mp4s/video3.mp4",
    "mp4s/video4.mp4",
    "mp4s/video5.mp4",
    "mp4s/video6.mp4",
    "mp4s/video7.mp4",
    "mp4s/video8.mp4",
    "mp4s/video9.mp4",
    "mp4s/video10.mp4"
];

var videoId = getRandomInt(0, 9);
var elemVideo = document.getElementById('video');
elemVideo.setAttribute('src', '/' + videos[videoId]);
var btn = document.getElementById('playRandom');

btn.addEventListener('click', function (e) {
    var nextId = getRandomInt(0, 9);

    if (nextId != videoId) {
        playNext(nextId);
    } else {
        while (nextId == videoId) {
            nextId = getRandomInt(0, 9);
        }

        playNext(nextId);
    }
});

/* gets random whole number between 0 and 9 */
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function playNext(id) {
    elemVideo.setAttribute('src', '/' + videos[id]);
    elemVideo.play();
}

这是一个更强大的实现，其中包含以前播放的视频的历史记录，因此您不会再次播放相同的视频。

var videos = [
    "mp4s/video1.mp4",
    "mp4s/video2.mp4",
    "mp4s/video3.mp4",
    "mp4s/video4.mp4",
    "mp4s/video5.mp4",
    "mp4s/video6.mp4",
    "mp4s/video7.mp4",
    "mp4s/video8.mp4",
    "mp4s/video9.mp4",
    "mp4s/video10.mp4"
];
var playedVideos = [];

var videoId = getRandomInt(0, 9);
var elemVideo = document.getElementById('video');
elemVideo.setAttribute('src', '/' + videos[videoId]);
var btn = document.getElementById('playRandom');

btn.addEventListener('click', playRandom);

function playRandom(e) {
    var nextId = getRandomInt(0, 9);

    if (nextId != videoId) {
        if (!playNext(nextId)) {
            playRandom(e);
        }
    } else {
        while (nextId == videoId) {
            nextId = getRandomInt(0, 9);
        }

        if (!playNext(nextId)) {
            playRandom(e);
        }
    }
}

/* gets random whole number between 0 and 9 */
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function playNext(id) {
    // checks if the video has already been played
    for (var src in playedVideos) {
        if (src == videos[id]) {
            return false;
        }
    }

    elemVideo.setAttribute('src', '/' + videos[id]);
    elemVideo.play();

    // adds src to arr of played videos
    playedVideos.push(videos[id]);

    /*
     * Everything from here on is optional depending on whether you want to
     * - iterate over the arr of videos and play each videos at least once before starting over or
     * - you want to stop playing videos after playing each at least once
     */

    // empties the played videos arr and allows you to start playing a new set of random videos
    if (playedVideos.length() == 10) {
        playedVideos = []; 
        // if you'd like to stop playing videos altogether at this, point delete the previous statement and display a prompt saying the playlist is over
        // or if you'd like to reset the playlist, then remove the event listener ('playRandom') and display a reset button that starts everything over from the beginning.
    }

    return true;
}