0

我想制作一个视频播放列表，（源视频被复制到画布中以阻止控件，下载视频等选项），我制作了 2 个拖放列表，我想将 1 个拖放列表连接到画布（即也是视频播放器框）然后播放视频1接1，没有停止，没有点击功能，功能AddEventListener在画布框中结束。

我值得看 2 个视频，这里是部分代码：

    <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 和动态的专业人士，我已经开始使用 Javascript，但成为专业人士需要时间！

如果您有一些代码，将不胜感激！提前致谢！！！

4

1 回答 1

1

为了使播放器可以连续播放视频，您需要在负载级别实现某种双缓冲（稍后我将演示）。

但是代码中存在一些问题-

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

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

检查视频支持的正确方法是使用如下方法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是它会maybe在 Chrome 和probablyFirefox 中返回。如果它无法播放视频类型，它会返回一个空字符串，因此我们检查字符串是否包含任何内容以确定播放此格式的可能性。

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

我会推荐一个像这样的简单程序：

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

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

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

var list = [];

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

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

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

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

这是一个在线演示

我制作这个演示只是为了演示双缓冲加载。随意将暂停、停止等方式合并到您自己的项目中。

我在此处提供的代码中有移动内容的空间，但这只是原理的示例。您还需要考虑下一个视频的加载时间比当前视频播放所需的时间更长的情况（即当前视频在下一个视频完成加载之前结束）。此代码中未检查。

为了使视频帧与您需要使用的画布正确同步，requestAnimationFrame否则您会不时冻结。

在演示中，循环一直在运行。您可以考虑实现一个条件来停止循环。我刚刚实现了一个在视频列表开始播放时绘制的条件（rAF 本身并没有使用太多资源，当你切换视频时你可能会遇到同步停止和开始的问题，所以我个人会让它按原样运行这种类型的场景（连续视频播放），只有在发生错误时才停止）。

于 2013-08-30T19:26:03.273 回答