在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>

这是一个快速的解决方案的袖口开始,至少应该指向正确的方向.这为您提供了一个带有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",falsE);
        }
    };
}();

但是,这里有很多事情没有涉及.例如,如果您在开始播放视频时设置要调用的init方法,则需要保留一个标记,指示是否有广告播放,以便播放处理程序在您转换时不会执行任何操作广告到内容(在load()调用后需要“播放”事件才能获得无缝播放).

我们在视频播放项目中使用类似的东西,大多数视频广告服务都是基于HTML的视频播放(与Flash视频播放相反).

它相对简单,但您必须确保跟踪应何时触发事件回调以及何时添加和删除这些回调.

另一件需要考虑的事情是“结束”事件的不可靠性.我还没有弄清楚它何时以及在哪个平台上一直着火,但这是一个众所周知的问题.一种可能的解决方案是使用“timeupdate”来测试“currentTime”属性是否比“duration”属性小一秒左右,这样你就知道你在视频结尾处是正确的.