html - 如何使用 HTML5 在视频中插入图像

Question

我正在考虑一种在播放的 HTML5 视频中插入广告图像的方法。我是 HTML5 的新手。所以，真的想不出包含此功能的方法。

如果视频时长为 1 分钟。我应该能够在 36 秒处停止视频并显示此图像 5 秒并自动移动到视频。

此功能是否有库或任何其他预build设置？

Answer 1

这可以通过 HTML5 Video API 实现。基本上你想要做的是在第 36 秒暂停视频，用图像覆盖它，然后在 5 秒后删除图像并再次播放视频。

这是一个如何执行此操作的示例:

var video; // acquire video

function PerformCheck() {
    var curTime = parseInt(video.currentTime, 10);
    if (curTime < 36) {
        setTimeout(PerformCheck, 200);
    } else {
        video.pause();
        PlayCommercial();
    }
}

function PlayCommercial() {
    // TODO: Display image overlay
    setTimeout(ResumeVideo, 5000);
}

function ResumeVideo() {
    // TODO: Remove image overlay
    video.play();
}

因此，在上面的示例中，您可以在视频开始播放后开始执行检查。如果用户这样做，则订阅视频事件。

video.onplay = PerformCheck();