2016-04-14 169 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

你應該保持原來的狀態,並將你的更正後的代碼作爲一個單獨的答案提交,然後將其作爲正確答案接受。這爲其他人留下了一條好路。 –