CODEWITHSUNDEEP
javascripthtmlvideorandom
ashamun
ashamun

Reputation: 148

Play a random video on button click

I should start by saying I'm not good with JS and I'm still trying to learn it.

I have 10 mp4s and I need to play one at random on a button click. I'm having trouble making it happen and I've searched around for a solution but to no avail.

Here's what I have so far:

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>

This unfortunately doesn't do what I need. This code will play all 10 videos one after the other on page load, then stop. I need it to only play one of the random 10 videos when someone pushes the "Push to Play" button. And I need it to keep going after 10.

Like I said I'm not good with JS at all and I was able to find this code from browsing around and modifying it a bit.

Upvotes: 1

Views: 953

Answers (1)

jsDorian
jsDorian

Reputation: 28

This should work for you.

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

This is a really basic implementation of what you want

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

This is a more robust implementation that includes a history of previously played videos so you don't play the same videos over again.

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

Upvotes: 1

Related Questions