在HTML5视频上插入广告

Question

如何在主视频播放前在html5视频标签上插入广告？有没有什么开源工具可以让这一切变得更容易？有什么参考资料可以指引我去那里吗？

它使用以下代码：

<script type="text/javascript">
   // listener function changes src
   function myNewSrc() {
      var myVideo = document.getElementsByTagName('video')[0];
      myVideo.src="../main.webm";
      myVideo.load();
      myVideo.play();
    }

   // function adds listener function to ended event -->

    function myAddListener(){
     var myVideo = document.getElementsByTagName('video')[0];
     myVideo.addEventListener('ended',myNewSrc,false);
    }
</script>

但是当它播放第二个时我就不能了。它显示了海报。我怎么摆脱这张海报？

Answer 1

这是一个快速启动的解决方案，至少应该为您指明正确的方向。这为您提供了一个带有init方法的单例，当调用该方法时，将在特定的视频元素上设置预滚动。

var adManager = function () {
    var vid = document.getElementById("myVid"),
        adSrc = "videos/epic_rap_battles_of_history_16_adolf_hitler_vs_darth_vader_2_1280x720.mp4",
        src;

    var adEnded = function () {
        vid.removeEventListener("ended", adEnded, false);
        vid.src = src;
        vid.load();
        vid.play();
    };

    return {
        init: function () {
            src = vid.src;
            vid.src = adSrc;
            vid.load();
            vid.addEventListener("ended", adEnded, false);
        }
    };
}();

尽管如此，还有许多事情没有在这里讨论。例如，如果将init方法设置为在开始播放视频时调用，则需要保留一个指示是否有广告正在播放的标志，以便在从广告转换到内容时播放处理程序不会执行任何操作(这需要在load()调用之后调用" play“事件以获得无缝回放)。

我们在我们的视频播放项目中使用了类似的东西，大多数视频广告服务对基于HTML的视频播放(而不是Flash视频播放)做类似的事情。

它相对简单，但您只需确保跟踪何时应该触发事件回调，以及何时添加和删除这些回调。

另一件要考虑的事情是“结束”事件的不可靠性。我还没有弄清楚它在什么时候以及在哪些平台上一直在运行，但这是一个相当众所周知的问题。一种可能的解决方案是使用"timeupdate“代替，并测试"currentTime”属性是否比"duration“属性短一秒左右，这样您就可以知道您是在视频的结尾。

Answer 2

抱歉，我现在不能测试这段代码，但理论上这应该可以工作。

<script>
// you will want to do checking here to see if the browser supports the video element
document.getElementById('video').addEventListener('ended', function()
{
    // the ad finished playing so update the src attribute to the real video
    document.getElementById('video').src = 'mainvideo.webm';
});
</script>

<video id="video" src="ad.webm">
</video>

Answer 3

您可能想看看Popcorn.js能做些什么。它允许你与Html5视频交互，覆盖文本和许多其他很酷的东西：

http://popcornjs.org/documentation