Javascript函数检测视频的不同关键帧

Question

我正在开发一个简单的应用程序，您可以在其中实时比较两个视频。该项目的一个要求是它们完全同步。我做了很多研究，并尝试了几乎所有我能在 Stack Overflow 上找到的加载事件，但没有成功。我有一个新想法，我不知道这是否可以用Javascript实现。首先，这是我的代码:

HTML:

<video id="leftVideo" src="before.mp4" oncanplaythrough="leftVideoLoaded()" alt="before" loop="true" width="600" height="366"></video>
<video id="rightVideo" src="after.mp4" oncanplaythrough="rightVideoLoaded()" alt="after" loop="true" width="600" height="366"></video>

JS:

var leftVideoLoadedCheck = 0;
var rightVideoLoadedCheck = 0;
function leftVideoLoaded() {
    leftVideoLoadedCheck = 1;
}

function rightVideoLoaded() {
    rightVideoLoadedCheck = 1;
}

$(document).ready(function() {
    $("#container").beforeAfter();

    var leftPlayer = new MediaElement("leftVideo");
    var rightPlayer = new MediaElement("rightVideo");

    var refreashLoadedEvent = setInterval(function(){
        if(leftVideoLoadedCheck == 1 && rightVideoLoadedCheck == 1) {

            setTimeout(function() {
                leftPlayer.play();
                rightPlayer.play();
            }, 1000);

            clearInterval(refreashLoadedEvent);
        }
    }, 50);
});

这是一个现场演示:

http://amarsyla.com/sandbox/beforeafter/

我得到了一些不错的结果，但如果视频继续循环几次，它们之间就会失去同步。有没有一种方法可以设置一个每 500 毫秒运行一次的函数，并检测每个视频的关键帧。当关键帧不相同时，暂停两个视频，然后在同一关键帧处重新开始播放。所以，我正在寻找这样的东西:

setInterval(function() {
    firstVideoKeyframe = ...
    secondVideoKeyframe = ...

    if(firstVideoKeyframe != secondVideoKeyFrame) {
        firstVideo.pause();
        secondVideo.pause();

        var keyframeToPlay = Math.min(firstVideoKeyframe, secondVideoKeyframe);

        firstVideo.playAtKeyframe(keyframeToPlay);
        secondVideo.playAtKeyframe(Math.min(keyframeToPlay));
    }
}, 500);

我希望这不是只有我的想象力才能做到的事情......

非常感谢。

Answer 1

如果您对同时在两个视频上调用 .play() 的效果感到满意，那么最简单的解决方案可能是不使用 loop="true" 使视频循环播放。相反，检测两个视频何时结束(使用 onished 事件)，然后再次播放它们。 (您可能需要寻找两者的开头，然后等待两者的oneeked，以确保它们都准备好播放。)

仍然存在一个视频落后于另一个视频的危险，主要是由于缓冲问题。您可以通过查看 .currentTime 来检测每个视频的播放位置。如果 .currentTime 的两个值相距太远，那么您需要将其中一个值指定为另一个值。 (不要期望它们完全相等。)

同步两个视频的“正确”方法是使用 MediaController ，但据我所知，还没有浏览器实现这一点。当它们这样做时，您可以通过为两个视频元素设置相同的 mediagroup 属性值来轻松同步视频(这会自动创建一个 MediaController 并将其附加到两个视频)。