2016-04-14 122 views
0

我试图从具有多个视频的页面获取当前视频源,它们由id分隔。jquery视频html5多个视频添加

例子是如下

<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'); 
    }); 

    }); 

}); 

回答

0

我用下面的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); 
    }); 
}); 
0

我可能是遥远的,如果我,请让我知道,我会删除我的答案。
但这里是我会尝试

  1. 外绑定事件中,抢来的视频对象的引用。
  2. 使用它来查找您的current_src
  3. 继续使用它来执行其他事件绑定。

只是一个想法。

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'); 
    }); 

    }); 

}); 
+0

感谢我没有更新我原来的职位的建议,新的jquery现在正在跟踪正确的

+0

你应该保持原来的状态,并将你的更正后的代码作为一个单独的答案提交,然后将其作为正确答案接受。这为其他人留下了一条好路。 –