Google DAI 中贴片事件未使用 videojs 触发

Question

我正在尝试让 HLS 视频与 videojs 和 Google 插播广告一起使用。幸运的是，我可以让视频插播广告正常工作。不幸的是，我没有得到广告开始或广告结束事件。

下面是 videojs-http-streaming 示例和 Google DAI 示例的组合。

这是我正在使用的标记。

<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<video-js id="my_video_1" class="vjs-default-skin"
  muted controls preload="auto" width="640" height="268">
</video-js>

<div id="click"></div>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>

这是脚本：

var player = videojs('my_video_1');
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
var videoElement = document.getElementsByTagName('video')[0];
var streamManager = new google.ima.dai.api.StreamManager(videoElement);
var clickElement = document.getElementById('click');
streamManager.setClickElement(clickElement);
streamManager.addEventListener([
    google.ima.dai.api.StreamEvent.Type.LOADED,
    google.ima.dai.api.StreamEvent.Type.ERROR,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
], function(t){console.log(t);
   if(t.type == 'loaded') {
       player.src(t.getStreamData().url);
       player.play();
   }
}, false);
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = TEST_ASSET_KEY;
streamRequest.apiKey = '';
streamManager.requestStream(streamRequest);

我希望控制台输出：

{type: "loaded", ...
{type: "adBreakStarted", ...

但我只看到 {type: "loaded", 事件。

如何显示所有事件？

Answer 1

信用到期。我想通了 thanks to this repository。

因此，为了 Google 产生预期的事件，需要通知视频元数据的状态。具体来说，它需要访问视频流中的 ID3 标签。

不幸的是，它无法通过本机 HTMLVideoElement 获得此信息。相反，它需要被告知信息。在 jwplayer 和 hls.js 的情况下，它很简单（请参见下面的示例），但在 videojs 的情况下，它就不那么简单了。您需要收听元数据轨道。

// I placed this right above player.src(t.getStreamData().url); above
// basically, you're looking at all of the tracks as they're added
player.textTracks().on('addtrack', function (e) {

  // find out if the new track is metadata
  var track = e.track;
  if (track.kind === 'metadata') {

    // a cuechange event fires when the player crosses over an ID3 tag
    track.on('cuechange', function () {
      let elemTrack = track.activeCues[0];

      if (elemTrack && elemTrack.value.data) {

        var metadata = {};

        metadata[elemTrack.value.key] = elemTrack.value.data;
        metadata["duration"] = Infinity;
        streamManager.onTimedMetadata(metadata);
      }

    });
  }
});

如果你用的是JWPlayer，就简单一点：

jwplayer().on('meta', function(e) {
    if (streamManager && e.metadata) {
        streamManager.onTimedMetadata(e.metadata);
    }
});

而且hls.js也很基础

hls.on("hlsFragParsingMetadata",
  function(event, data) {
    if (streamManager && data) {
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  }
);

Google DAI 中贴片事件未使用 videojs 触发

Google DAI mid-roll events not triggering with videojs

ads

http-live-streaming

video.js