小编RMD*_*per的帖子

我有一个<div>下拉目标,我附加了'drop'和'dragover'事件.该<div>包含图像的锚定标记(简单化:<div><a><img /></a></div>).目标的子元素似乎阻止触发"掉落"或"悬垂"事件.仅当拖动的元素位于目标上方但未覆盖其子元素时,才会按预期触发这两个事件.

我想要实现的行为是<div>,无论子元素是否存在,'dragover'和'drop'事件都会在目标上的任何地方触发.

我正在尝试构建一个能够无缝串联播放视频URL列表的视频序列器.视频之间不能有差距; 播放需要尽可能接近帧精确.

尝试#1我使用了一种相当明显和直接的方法,类似于这个线程中提到的方法. HTML 5视频或音频播放列表

这种方法的问题在于,每当一个视频结束并且后续视频被指定为新源时,该新视频仍然需要加载,从而导致可能存在长的差距.如果甚至可以在video.src中命名之前强制所有视频都进行预加载,那么这种方法仍然有效.

尝试#2我重写了脚本,因此列表中的每个视频都会导致创建一个单独的视频元素,但不会附加到文档中(使用createElement).然后,当每个视频结束时,我删除了前一个节点并附加了下一个元素.

在页面加载时执行的代码:

for (i in timelinePlay)
    if (timelinePlay[i] != null)        
    {
        var element = document.createElement('video');
        element.id = 'video1-' + (i);
        element.src = timelinePlay[i]['URL'];
        element.preload = 'load';
        video1Array[i] = element;
    }

视频'已结束'活动代码:

videoElement.addEventListener("ended", function (event) {
    if (this.currentTime > 0)
    {
        if (player.hasChildNodes())
            while (player.childNodes.length > 0)
                player.removeChild(player.firstChild);

        player = document.getElementById('canvas-player');
        player.appendChild(video1Array[timelineCurrent]);

        nextVideo = document.getElementById('video1-' + timelineCurrent);

        nextVideo.play();

        timelineCurrent++;
    }
}, false);

(请注意,这些代码示例是部分的,并且有些简化.另外,我确实认识到我将对象用作关联数组不是最佳实践)

这种修改的结果更接近,因为视频现在在他们被要求播放时加载,但视频之间仍然存在短暂且不一致的差距.

尝试#3我用'timeupdate'监听器替换了'ends'事件监听器,开头如下:

nextVideo.addEventListener("timeupdate", function (event)
{
    if (this.currentTime > (this.duration - 0.1)  && this.currentTime > 1) …