jquery视频html5多个视频添加
问题描述:
我试图从具有多个视频的页面获取当前视频源,它们由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');
});
});
});
答
我用下面的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);
});
});
答
我可能是遥远的,如果我,请让我知道,我会删除我的答案。
但这里是我会尝试:
- 外绑定事件中,抢来的视频对象的引用。
- 使用它来查找您的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');
});
});
});
感谢我没有更新我原来的职位的建议,新的jquery现在正在跟踪正确的 – ondrovic
你应该保持原来的状态,并将你的更正后的代码作为一个单独的答案提交,然后将其作为正确答案接受。这为其他人留下了一条好路。 –