时间戳

首页 > 解决方案 > 单击按钮播放随机视频

javascript - 单击按钮播放随机视频

问题描述

我应该首先说我不擅长 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 个视频，然后停止。当有人按下“Push to Play”按钮时，我需要它只播放随机的 10 个视频之一。我需要它在 10 点之后继续前进。

就像我说的，我根本不擅长 JS，我可以通过浏览和修改它找到这段代码。

标签： javascripthtmlvideorandom

解决方案

这应该适合你。

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

推荐阅读