Мероприятия Google DAI в середине ролика не запускаются с помощью videojs - PullRequest
Новая
       38

Мероприятия Google DAI в середине ролика не запускаются с помощью videojs

0 голосов
/ 02 декабря 2018

Я пытаюсь заставить видео 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",.

Как получить всесобытия, чтобы показать?

1 Ответ

0 голосов
/ 04 декабря 2018

Кредит, где кредит должен.Я понял это благодаря этому репозиторию .

Итак, для того, чтобы 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);
      });
    }
  }
);
...