Html 任务：创建一个视频列表和画布的连接，让它们逐个播放，没有停止，没有点击功能，AddEventListener结束_Html_Video_Canvas_Playlist

Html 任务：创建一个视频列表和画布的连接，让它们逐个播放，没有停止，没有点击功能，AddEventListener结束

html video canvas

Html 任务：创建一个视频列表和画布的连接，让它们逐个播放，没有停止，没有点击功能，AddEventListener结束,html,video,canvas,playlist,Html,Video,Canvas,Playlist,我想制作一个视频播放列表，（将源视频复制到画布中以阻止控件，选项，如下载视频），我制作了2个拖放列表，我想将1个拖放列表连接到画布（这也是视频播放器框），然后逐个播放视频，没有停止，没有单击函数，函数AddEventListener在画布框中结束我需要2个视频，以下是部分代码： <script type="text/javascript"> // listener function changes src function myNewSrc() {

我想制作一个视频播放列表，（将源视频复制到画布中以阻止控件，选项，如下载视频），我制作了2个拖放列表，我想将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>


//侦听器函数更改src
函数myNewSrc（）{
var myVideo=document.getElementsByTagName（'video'）[0]；
myVideo.src=“videos/80s\u Mix_II-700.mp4”；
myVideo.src=“videos/80s\u Mix_II-700.webm”；
myVideo.load（）；
myVideo.play（）；
}
//向结束的事件添加侦听器函数
函数myAddListener（）{
var myVideo=document.getElementsByTagName（'video'）[0]；
myVideo.addEventListener（'end'，myNewSrc，false）；
}
您的浏览器不支持HTML5画布标记。
var v=document.getElementById（“视频”）；
var c=document.getElementById（“myCanvas”）；
ctx=c.getContext（'2d'）；
v、 addEventListener（'play'，function（）{
var i=window.setInterval（函数（）
{
ctx.drawImage（v、5、5、1130560）
}, 20);
}，假）；
v、 addEventListener（'pause'，function（）{
窗口。清除间隔（i）；
}，假）；
v、 addEventListener（'ended'，function（）{
间隔时间（i）；
}，假）；
运河贵宾

这个想法是说，从卡德雷那里获取视频，在画布上一个接一个地播放，直到结束并循环，形成相同的路径

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

希望能有一些建议！！我不支持Php和动态，我已经开始使用Javascript，但是成为职业选手需要时间

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

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

但代码本身存在一些问题-

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

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

但是，

canPlayType

的问题是，它在Chrome中返回

maybe

，在Firefox中返回

maybe

。如果无法播放视频类型，它将返回一个空字符串，因此我们将检查字符串是否包含任何内容，以确定播放此格式的可能性

您还需要为

canplay

实现一个事件监听器，它告诉您的应用程序视频已成功加载和缓冲，现在可以使用play启动（如果

autoplay

设置为

true

，则启动）

我建议采用如下简单程序：

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

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

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

我还建议重新分解代码以处理加载和播放

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

var list = [];

我们现在可以添加如下URL：

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

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

我做这个演示只是为了演示双缓冲加载。您可以通过暂停、停止等方式自由地将其纳入您自己的项目中

我在这里提供的代码中有移动东西的空间，但正如前面所说的，这只是原理的一个例子。你还需要考虑一个场景，下一个视频需要更长的时间来加载当前播放的视频（例如，当前视频在下一个完成加载之前结束）。此代码中未选中此项

为了正确地将视频帧与画布同步，您需要使用

requestAnimationFrame

，否则您将不时被冻结

在演示中，循环一直运行。可以考虑实现条件来停止循环。我刚刚实现了一个在视频列表开始播放时进行绘制的条件（rAF本身不使用太多资源，在切换视频时，您可能会遇到同步停止和启动的问题，因此我个人会让它在这种情况下保持运行（连续视频播放），并且仅在出现错误时停止）.

非常感谢肯！！！非常感谢！！我会去你的网站看看。这比更改src要好得多，如果我想在同一页面中将其与我的拖放列表框链接，我应该怎么做，比如说：从#cadre2抓取视频，可能我会在另一个网页中为该人选择视频。但是我有一个dougt，如果列表是一个拖放框，那么当浏览器刷新时，它怎么能保持在拖放框中而不丢失拖放文件呢？很抱歉问了很多问题，我是这些语言的初学者。谢谢你所做的一切！！！