How to track video milestones in brightcove html5 player using adobe DTM?

问题

I have a query regarding how to track milestones(Video) in brightcove player by using html 5.

There is already predefined events available for PLAY, PAUSE, STOP, but for the tracking the milestones i am unable to track it via DTM.

Below mentioned is the code,which i have written for PLAY & PAUSE -

CODE -

videojs('te-brightcove-trigger-video_html5_api').on('play',function(){
  var myPlayer = this;
    console.log('play');
  s.linkTrackVars='events,eVar21,prop21';
  s.linkTrackEvents='event22';
  s.eVar21 = myPlayer.mediainfo.name;
  s.prop21 = myPlayer.mediainfo.name;
  s.events = 'event22';
  s.tl(this, 'o');
});


videojs('te-brightcove-trigger-video_html5_api').on('pause',function(){
     console.log('pause');
  var myPlayer = this;
  s.linkTrackVars='events,eVar21,prop21';
  s.linkTrackEvents='event21=6,event24';
  s.eVar21 = myPlayer.mediainfo.name;
  s.prop21 = myPlayer.mediainfo.name;
  s.events = 'event21=6';
  s.events = 'event24';
  s.tl(this, 'o');
});

回答1:

Okay look, I'm not sure what exactly you are having trouble with, but posting new questions asking the same thing isn't going to help you. You keep posting these questions asking for help on milestones, but I have yet to see you pony up any code directly relevant to milestones. If you want actual help with understanding where you went wrong, then post what you have actually tried that is relevant to your question.

In general, here is a working example of what you should be doing.

// keep track of events that are triggered to only trigger them once
videojs('te-brightcove-trigger-video_html5_api')._isEventViewed = {};

videojs('te-brightcove-trigger-video_html5_api').on('play',function(){
  if (!this._isEventViewed.play) {
    console.log('VIDEO: tracking PLAY event');
    /* tracking code here */
    this._isEventViewed.play=true;
  }
});

videojs('te-brightcove-trigger-video_html5_api').on('pause',function(){
  if (!this._isEventViewed.pause) {
    console.log('VIDEO: tracking PAUSE event');
    /* tracking code here */
    this._isEventViewed.pause=true;
  }
}); 

videojs('te-brightcove-trigger-video_html5_api').on('timeupdate',function(){
  var currentTime = Number(this.currentTime());
  var duration = Number(this.duration());
  var percentViewed = Math.floor((currentTime/duration)*100);
  var ev = this._isEventViewed;
  //console.log(currentTime,' / ', duration, ' - ',percentViewed);
  //console.log('_isEventViewed:',ev);
  switch(true) {
    case (!ev['25'] && percentViewed >= 25) : 
        console.log('VIDEO: tracking 25% MILESTONE event');
        /* tracking code here */
        ev['25']=true;
      break;
    case (!ev['50'] && percentViewed >= 50) : 
        console.log('VIDEO: tracking 50% MILESTONE event');
        /* tracking code here */
        ev['50']=true;
      break;
    case (!ev['75'] && percentViewed >= 75) : 
        console.log('VIDEO: tracking 75% MILESTONE event');
        /* tracking code here */
        ev['75']=true;
      break;
  } // end switch percentViewed
}); 

videojs('te-brightcove-trigger-video_html5_api').on('ended',function(){
  if (!this._isEventViewed.ended) {
    console.log('VIDEO: tracking ENDED event');
    /* tracking code here */
    this._isEventViewed.ended=true;
  }
});

来源：https://stackoverflow.com/questions/46403208/how-to-track-video-milestones-in-brightcove-html5-player-using-adobe-dtm

标签

dynamic