3

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

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

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

4

3 回答 3

3

这可以通过 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();
于 2012-10-03T13:58:56.740 回答
3

几乎没有什么是使用 JavaScript 无法完成的。
一些建议：
使用 Javascript 启动计时器 t1(36Sec)，使用setTimeout();.
然后，在回调函数中， 1）使用（或）类似方法
暂停视频。 2) 更改 CSS 以显示图像，然后启动第二个计时器 t2(5Sec)，这会将图像的 CSS 更改回不可见/显示：无3) 使用 这只是一个 Kick 启动器 播放/恢复视频。你必须完成剩下的作业！StackOverflow 鼓励您收集所需的信息并至少在某个时候尝试一下 document.getElementById('myvideotag').pause();

document.getElementById('myvideotag').play();


于 2012-10-03T14:05:32.917 回答
1

我想通过以下方式解决问题（作为第一次尝试）：

  1. 创建一个视频标签，然后使用一些 javascript 代码引用视频标签。
  2. 创建一个画布并在其中绘制视频内容，然后创建另一个将保存广告图像的画布。在所需的时间，我们将在第一个画布上绘制第二个画布内容。

代码应如下所示：

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上找到了一篇关于该过程的很好的详尽解释的文章。但是我没有检查他们的解决方案。提供的解决方案并不完整，我只勾勒出我将如何解决问题的基本想法。

于 2012-10-03T14:14:27.730 回答