Воспроизвести случайное видео по нажатию кнопки

Question

Я должен начать с того, что я плохо разбираюсь в JS, и все еще пытаюсь выучить его.

У меня 10 mp4s, и мне нужно сыграть один случайным образом при нажатии кнопки. У меня проблемы с выполнением этого, и я искал решение, но безрезультатно.

Вот что у меня есть:

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;
}