在 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”属性少一秒左右，这样您就知道您正处于视频的结尾处。

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< /a>

Answer 4

@natlee75 对我来说这不起作用
我把它改成这样：

$( document ).ready(function() {
var adManager = function () {
    var vid = document.getElementById("vid1564730217"),
        adSrc = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.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();		
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="vid1564730217" src="http://techslides.com/demos/sample-videos/small.mp4" width="100%" style="max-height:600px;" poster="http://orperry.com/sample/wp-content/uploads/2015/12/sample-logo.png" controls>
	<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Answer 5

您是否曾经在线观看过视频并看到横幅广告显示在
视频顶部？或者观看视频并看到中途出现广告
通过？使用时，富媒体广告占据屏幕怎么样？
移动应用程序？

这个问题是 8 年前提出的，多年来情况发生了变化，现在我们有了 VAST、VPAID、VMAP 和 VAST 等协议>MRAID。

此处了解有关它们的信息。