如何在Javascript / Html5中随机化视频播放列表 [英] How to randomize video playlist in Javascript / Html5

问题描述

我是JS和
的初学者我想知道如何随机化视频播放列表（JS），我想使用画布来查看受保护的视频（通过画布传递视频），然后循环视频开始再次，视频连续播放列表随机。不停机

I'm a beginner in JS and I would like to know how to randomize a video playlist (JS), i want to use a canvas to see the videos "protected" (pass the videos trough the canvas) and then loop the videos to start again, video continous playlist randomizing. Non-stop

帮助将非常感谢！提前致谢！！

Help would be really appreciated! THANKS in advance!!

推荐答案

您可以简单地以数组形式生成列表：

You can simply generate a list as an array:

var videoList = [video1url, video2url, ...];

然后使用自定义分拣机将其随机排序：

Then sort it with a custom sorter which will randomize it:

videoList.sort(function(a, b) {return 0.5 - Math.random()});

在线演示 （打开控制台查看已排序列表）。

Online demo here (open the console to see the "sorted" list).

您可以查看 这个小提琴 我刚才所做的。

For a continuous video player you can check out this fiddle I made a while ago.

var ctx = canvas.getContext('2d'),             /// get canvas
    w = canvas.width,                          /// cache dimensions
    h = canvas.height,
    video1 = document.createElement('video'),  /// two video elements
    video2 = document.createElement('video'),
    isVideo1 = false,                          /// toggler
    list = [],                                 /// video list
    current = 0,                               /// index
    isPlaying = false;                         /// is video playing

/// add event handlers so we know when a video finished
video1.addEventListener('ended', play, false);
video2.addEventListener('ended', play, false);

/**
 *  Then we add a few videos to our list
*/

/// first arg. is always mp4 version, second anything else (ogg, webm etc)
addVideo('somevideourl1.mp4', 'somevideourl.ogg');
addVideo('somevideourl2.mp4', 'somevideour2.webm');

/// here you re-sort your list with the random (see details for list)
list.sort(function(a, b) {return 0.5 - Math.random()});

/// get first video    
getVideo(list[0], play);

/// start loop
render();

/// this will start play the videos
function play(){

    /// what video to start
    var video = (isVideo1 === false ? video1 : video2),
        next = current;

    /// toggle    
    isVideo1 = !isVideo1;

    /// get next video in list
    next++;
    if (next > list.length - 1) next = 0;

    if (list.length > 0) getVideo(list[next]);

    /// start video
    video.play();
    isPlaying = true;

    current = next;
}

/// this draws the video frames to canvas    
function render() {
    if (isPlaying) {
        var video = (isVideo1 === true ? video1 : video2);
        ctx.drawImage(video, 0, 0, w, h);
    }
    requestAnimationFrame(render);
}

/// this function adds a video to the list    
function addVideo(urlMP4, url) {
    list.push({
        urlMP4: urlMP4,
        url: url,
        isReady: false
    })
}

/// start download a video
function getVideo(vid, callback) {

    var video = (isVideo1 === false ? video1 : video2),
        me = this;

    video.addEventListener('canplay', canPlay, false);;

    function canPlay(e) {
        video.removeEventListener('canplay', canPlay, false);
        vid.isReady = true;
        if (typeof callback === 'function')
            callback(vid);
    }

    if (video.canPlayType("video/mp4").length > 0) {
        video.src = vid.urlMP4;
    } else {
        video.src = vid.url;
    }
}

这篇关于如何在Javascript / Html5中随机化视频播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！