使用插件在视频播放器中显示插播广告答案

【问题标题】：Show mid-roll ads in video player using plugin使用插件在视频播放器中显示插播广告
【发布时间】：2018-01-23 16:53:09
【问题描述】：

尝试使用 Vast 2.0 和 video.js 开发自定义视频播放器。我成功地展示了带有跳过按钮功能的前贴片广告。

我将我的自定义视频作为广告展示。

有人可以帮助我如何在几分钟后显示多个插播广告吗？

更新 XML 文件以供参考：

<VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0" xsi:noNamespaceSchemaLocation="vast.xsd">

    <Ad id="176" >

        <InLine>
            <AdSystem version="2.0">ONION</AdSystem>
            <AdTitle>In-Stream Video</AdTitle>
            <Description>Grand Budapest Hotel_Fridays</Description>

            <Impression><![CDATA[http://reporting.theonion.com/videoadtracker/track.gif?videoAd=176&event=impression]]></Impression>
            <Creatives>
                <Creative sequence="1" AdID="">
                    <Linear>
                        <Duration>00:00:10</Duration>
                        <TrackingEvents>
                            <Tracking event="start"><![CDATA[http://reporting.theonion.com/videoadtracker/track.gif?videoAd=176&event=start]]></Tracking>

                            <Tracking event="start"><![CDATA[http://ad.doubleclick.net/ddm/trackimp/N2998.Onion/B7912634.16;dc_trk_aid=279982600;dc_trk_cid=57339121;ord=[timestamp]]]></Tracking>





                        </TrackingEvents>

                        <VideoClicks>
                            <ClickThrough><![CDATA[http://ad.doubleclick.net/ddm/trackclk/N2998.Onion/B7912634.16;dc_trk_aid=279982600;dc_trk_cid=57339121;ord=[timestamp]?http://www.foxsearchlight.com/thegrandbudapesthotel]]></ClickThrough>
                        </VideoClicks>

                        <MediaFiles>

                            <MediaFile id="1" delivery="progressive" type="video/mp4"><![CDATA[media/test.mp4]]></MediaFile>

                            <MediaFile id="1" delivery="progressive" type="video/webm"><![CDATA[http://v.theonion.com/onionmedia/videos/videometa/1521/test.webm]]></MediaFile>

                        </MediaFiles>
                    </Linear>
                </Creative>
            </Creatives>
      </InLine>

    </Ad>

</VAST>

【问题讨论】：

标签： javascript html video vast

【解决方案1】：

何时播放 VAST 广告的信息不是 VAST-XML 的一部分，而是播放器实现和配置的一部分。客户应该能够决定何时播放广告。

只需找到视频的中间部分或为流定义固定的时间，然后开始播放广告。由于您已经拥有播放器，这应该是一件容易的事。

【讨论】：

【解决方案2】：

使用 video.js，您可以使用 timeupdate 事件通过检查 currentTime 值在特定时间触发您想要的任何内容。

尝试以下 sn-p 并查看其控制台，在第 5 秒您可以触发您的广告展示操作等。

var player = videojs('my-video');
player.on('timeupdate', function(){
  var currentTime = this.currentTime();
  console.log(currentTime)
  if(Math.round(currentTime)===5){
    console.info('Trigger your code here');
  }
});

<link href="https://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>


<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="https://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

【讨论】：