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" 使视频循环播放。相反，检测两个视频何时结束（使用 onended 事件），然后再次播放它们。（您可能需要寻找到两者的开头，然后等待 onseeked 以确保它们都已准备好播放。）

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

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

Javascript 视频不同关键帧检测功能

Javascript function to detect different keyframes of videos

javascript

video

html5-video

mediaelement.js

mediaelement