Question

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

如果视频长达1分钟。我应该可以在36秒停止视频并显示此图像5秒钟并自动移动到视频。

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

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();

Answer 2

使用JavaScript几乎无法做任何事情。
一些建议：
使用Javascript使用setTimeout();启动计时器t1（36Sec）。
然后，在回调函数中，
1）使用document.getElementById('myvideotag').pause();（或）类似方法暂停视频 2）更改CSS以显示图像，然后启动第二个计时器t2（5Sec），它将图像的CSS更改为不可见/显示：无
3）使用document.getElementById('myvideotag').play();
播放/恢复视频
这只是一个踢开始。你必须完成其余的功课！ StackOverflow鼓励您收集所需信息并至少尝试一下

Answer 3

我认为以下列方式解决问题（作为第一次尝试）：

创建视频代码，然后使用一些javascript代码引用视频代码。
创建画布并在其中绘制视频内容，然后创建另一个用于保存广告图像的画布。在期望的时间，我们将在第一个画布内容之上绘制第二个画布内容。

代码应如下所示：

var startTime = Date.now();
$(function () {
    var canvas = document.getElementById('canvas');
    var canvas2 = document.createElement('canvas');    
    canvas2.setAttribute('id', 'canvas2');
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    var img = new Image();
    img.src = "...";
    img.onload = function() {
        ctx2.drawImage(img);
    }

    var video = document.getElementById('video');

    video.addEventListener('play', function () {
        var $this = this; //cache
        (function loop() {
            var currentTime = Date.now() - startTime;
            if (!$this.paused && !$this.ended) {
                if (currentTime > 3600)  {
                    ctx.drawImage(canvas2, 0, canvas.height - 100);
                } else {
                    document.removeElementById('canvas2');
                }                    

                ctx.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
});

我在html5doctor找到了一篇关于这个过程的完整解释的文章。但是我没有检查他们的解决方案。提供的解决方案并不完整，我仅仅概述了如何解决问题的基本思路。

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

3 个答案: