html - 在 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() 之后执行“播放”事件才能实现无缝播放)。

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

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

另一件需要考虑的事情是“结束”事件的不可靠性。我还没有弄清楚它何时以及在哪些平台上持续触发，但这是一个众所周知的问题。一个可能的解决方案是改用“timeupdate”并测试“currentTime”属性是否比“duration”属性少大约一秒，这样你就知道你已经到了视频的结尾。