jquery 视频 html5 多视频跟踪

Question

我正在尝试从包含多个视频的页面获取当前视频源，它们由 id 分隔。

例子如下

<video id="videoOne"
controls src="videoOne.mp4"
</video>

<video id="videoTwo"
controls src="videoTwo.mp4"
</video>

我可以通过将 0 更改为 1 来引用适当的视频来播放正在触发的事件，我只需要能够通过 jquery 来做到这一点，但我不确定如何完成这个

var current_source = $('video')[0].currentSrc;

在下面jquery

var PodcastAnalytics = PodcastAnalytics || {};

// Wait for the video element to be parsed before attempting this.
$(document).ready(function(){

  // Wait until the video metadata has been loaded before we try to determine the current video source.
  $('video').on('loadedmetadata', function(){

    // Simple function to chop off the file extension for the current source of the video. 
    PodcastAnalytics.audio_url = (function(){
      var current_source = $('video')[0].currentSrc;
      return current_source.slice(0, -4);
    }());
    // function that sends the actual tracking beacon
    PodcastAnalytics.gaq_track = function(action) {
      // All events will be in the Video category
      var tracking_params = ['podcast','audio']
      // append the event action after the event method and the event category    
      tracking_params.push(action);
      // append the video url as the event label
      tracking_params.push(PodcastAnalytics.audio_url);

      // Replace this console.log with something like this if you are using Google Analytics:
      // _gaq.push(tracking_params);
      console.log(tracking_params);
    }

    $('video').on('play', function(){
      PodcastAnalytics.gaq_track('Play');
    });

    $('video').on('pause', function(){
      PodcastAnalytics.gaq_track('Pause');
    });

    $('video').on('seeked', function(){
      PodcastAnalytics.gaq_track('Seeked');
    });

    $('video').on('ended', function(){
      PodcastAnalytics.gaq_track('Ended');
    });

  });

});

Answer 1

我可能跑题了，如果我跑题了，请告诉我，我会删除我的回答。
但这是我会 try:

在外部绑定事件中，获取对视频对象的引用。
用它来找到你的 current_src
继续使用它来执行其他事件绑定。

只是一个想法。

var PodcastAnalytics = PodcastAnalytics || {};

// Wait for the video element to be parsed before attempting this.
$(document).ready(function(){

  // Wait until the video metadata has been loaded before we try to determine the current video source.
  $('video').on('loadedmetadata', function(){
    // should 'this' refer to the video object?
    var $video = $(this); 

    // Simple function to chop off the file extension for the current source of the video. 
    PodcastAnalytics.audio_url = (function(){
      var current_source = $video.attr('currentSrc');
      // var current_source = $('video')[0].currentSrc;
      return current_source.slice(0, -4);
    }());
    // function that sends the actual tracking beacon
    PodcastAnalytics.gaq_track = function(action) {
      // All events will be in the Video category
      var tracking_params = ['podcast','audio']
      // append the event action after the event method and the event category    
      tracking_params.push(action);
      // append the video url as the event label
      tracking_params.push(PodcastAnalytics.audio_url);

      // Replace this console.log with something like this if you are using Google Analytics:
      // _gaq.push(tracking_params);
      console.log(tracking_params);
    }

    $video.on('play', function(){
      PodcastAnalytics.gaq_track('Play');
    });

    $video.on('pause', function(){
      PodcastAnalytics.gaq_track('Pause');
    });

    $video.on('seeked', function(){
      PodcastAnalytics.gaq_track('Seeked');
    });

    $video.on('ended', function(){
      PodcastAnalytics.gaq_track('Ended');
    });

  });

});

Answer 2

我使用以下 jquery 获得了正确的 <video id=""/> 但仍然想知道这是否可能以及如何获得 currentSrc from e.target.id

$(document).ready(function($){

    $('video').on('loadedmetadata', function() {

            tracking = function(action,id, source) {

                var items = ['podcast','audio',action,id, source];

                console.log(items);
            };
        });

    $('video').off('play').on('play', function(e) {
            var idx = $(this).index();
            var currentSource = $('video')[idx].currentSrc;
            tracking('Play', e.target.id, currentSource);
        });

    $('video').off('pause').on('pause', function(e) {
        tracking('Pause', e.target.id);
    });

    $('video').off('seeked').on('seeked', function(e) {
        tracking('Seeked', e.target.id);
    });

    $('video').off('ended').on('ended', function(e) {
        tracking('Ended', e.target.id);
    });
});

jquery 视频 html5 多视频跟踪

jquery video html5 multiple video tacking

html

jquery

html5-video