问任务:创建一个与视频列表和画布的连接，让它们一对一地播放，没有停止，没有点击功能，结束AddEventListener
EN

Stack Overflow用户

提问于 2013-08-30 07:45:15

回答 1查看 574关注 0票数 0

我想做一个视频播放列表，(源视频是在画布复制块控制，像下载视频的选项)，我做了2个拖放列表，我想连接1拖拽n下拉列表到画布(这也是视频播放器框)，然后播放视频1个1，没有停止，没有点击功能，功能AddEventListener结束在画布框中。

我值得买两个视频，下面是代码的一部分：

    <script type="text/javascript">
    // listener function changes src
    function myNewSrc() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = "videos/80s_Mix_II-700.mp4";
        myVideo.src = "videos/80s_Mix_II-700.webm";
        myVideo.load();
        myVideo.play();
    }



    // add a listener function to the ended event
    function myAddListener() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.addEventListener('ended', myNewSrc, false);
    }

</script>



<body onload="myAddListener()">

    <div id="video_player_box">

        <video id="video" autoplay autobuffer width="1" height="1" >
            <source src="videos/milenio_6_minimix_700.mp4" type="video/mp4">
            <source src="videos/milenio_6_minimix_700.webm" type="video/webm">
            <source src="videos/milenio_6_minimix_700.ogg" type="video/ogg">
        </video>

        <div align="center">
            <canvas id="myCanvas" width="1130" height="560">
                Your browser does not support the HTML5 canvas tag.</canvas>
        </div>



        <script>

            var v = document.getElementById("video");
            var c = document.getElementById("myCanvas");
            ctx = c.getContext('2d');

            v.addEventListener('play', function() {
                var i = window.setInterval(function()
                {
                    ctx.drawImage(v, 5, 5, 1130, 560)
                }, 20);
            }, false);
            v.addEventListener('pause', function() {
                window.clearInterval(i);
            }, false);
            v.addEventListener('ended', function() {
                clearInterval(i);
            }, false);

        </script>

    </div> 


    <div id="cadre2" ondrop="drop(event)" ondragover="allowDrop(event)"> <p> Canal VIP </p>
        <ol><li> <video src="videos/milenio_6_minimix_700.mp4" draggable="true"   
                        ondragstart="drag(event)" id="drag1" width="288" height="188" alt="Video 1">
                </video></li>

..。

这个想法是说从#cadre2获取视频，在画布上一个接一个地播放它们，直到结束并循环，形成相同的路径。

我拖拽我的列表，使在线修改视频播放列表的决定更加灵活。

希望能有一些建议！！我不是Php和dynamic的专家，我已经开始使用Javascript了，但要成为专家需要时间！

如果你有一些代码，将会非常感谢！提前感谢！

html

video

canvas

playlist

腾讯云OCR文字识别特惠

文字识别限时抢购，热门产品低至14.9元

回答 1

Stack Overflow用户

发布于 2013-08-30 19:26:03

为了使播放器能够连续播放视频，您需要在加载级别实现某种类型的双缓冲(我将在稍后演示)。

但代码中存在一些问题-

myVideo.src = "videos/80s_Mix_II-700.mp4";
myVideo.src = "videos/80s_Mix_II-700.webm";
myVideo.load();

这将简单地覆盖source属性。并且设置信号源将自动开始加载视频。

检查视频支持的正确方法是使用方法canPlayType，如下所示：

/// which format can we play?
if (video.canPlayType("video/mp4").length > 0) {
    video.src = urlToMP4;

} else if (video.canPlayType("video/webm").length > 0) {
    video.src = urlToWEBM;

} else {
    video.src = urlToOggOrSomeOtherSupportedFormat;
}

不过，canPlayType的问题在于，它在Chrome中返回maybe，在火狐中返回probably。如果不能播放视频类型，则返回一个空字符串，因此我们检查string是否包含任何内容，以确定该格式是否可以播放。

您还需要为canplay实现一个事件侦听器，它会告诉您的应用程序视频已成功加载和缓冲，现在可以使用play启动(如果autoplay设置为true，则可以启动)。

我推荐一个简单的过程，如下所示：

使用您要播放的各种格式的视频URL创建对象数组
加载第一个视频时(canplay)开始加载列表中的下一个视频当开始播放第一个

时

我还建议对代码进行重构，以处理加载和播放。

例如，如果我们初始化一个数组来保存我们的自定义视频对象：

var list = [];

我们现在可以像这样添加URL：

function addVideo(urlMP4, url) {
    list.push({
        urlMP4: urlMP4,
        url: url,
        isReady: false
    })
}

然后这个函数会让我们为WEBM或OGG添加一个MP4和一个链接：

addVideo('http://video1.mp4', 'http://video1.webm');
addVideo('http://video2.mp4', 'http://video2.webm');
addVideo('http://video3.mp4', 'http://video3.ogg');
...

然后，我们需要启动一个“连锁反应”，可以说是通过使用双缓冲加载机制。第一次需要手动触发时：

getVideo(list[0], play);

function getVideo(vid, callback) {

    /// which video is playing? (see demo for details)
    var video = (isVideo1 === false ? video1 : video2),
        me = this;

    /// we need to know when video is ready
    video.addEventListener('canplay', canPlay, false);;

    /// call this when ready
    function canPlay(e) {

        /// remove event listener (in case setting new src does not trigger)
        video.removeEventListener('canplay', canPlay, false);

        /// update our object with useful data, for example:
        vid.isReady = true;

        /// if we provided a callback then call that with custom video object
        if (typeof callback === 'function')
            callback(vid);
    }

    /// check video format support (see demo for details)
    if (video.canPlayType("video/mp4").length > 0) {
        video.src = vid.urlMP4;

    } else {
        video.src = vid.url;
    }
}

我们的play函数将管理正在播放的视频以及接下来要播放的内容：

function play(){

    /// what video is currently not playing?
    var video = (isVideo1 === false ? video1 : video2),
        next = current; /// current is index for list, starts at 0

    /// switch
    isVideo1 = !isVideo1;

    /// increment for next video to platy and start over if list ended    
    next++;
    if (next > list.length - 1) next = 0;

    /// only attempt next if there are more videos than 1 in list
    if (list.length > 0) getVideo(list[next]);

    /// start already loaded video (getVideo)
    video.play();
    isPlaying = true;

    /// set current to next in list
    current = next;
}