跟踪视频里程碑从自定义HTML5视频播放器到Omniture媒体模块
Tracking video milestones from a custom HTML5 video player to Omniture Media Module?
我有一个移动Javascript应用程序,它偶尔会在屏幕上动态创建一个<video>
元素。我需要用Omniture跟踪视频播放。我绑定了play
, pause
, ended
, seeking
和seeked
事件,以跟踪用户启动视频,暂停,恢复和停止(或他们完成观看视频)。这都是通过像
s.Media.play("some_video_name", timePosition);
和
s.Media.stop("some_video_name");
等。
我现在想做的是用trackMilestones
选项跟踪0,25,75和100%的位置里程碑,但我不明白我在网上找到的任何例子实际上是如何通知Omniture s.Media
对象它们在哪里。Omniture将无法神奇地知道我的视频在哪里,除非它将事件处理程序附加到我的视频元素。这就是他们在做的吗?
是否有一些方法我可以调用s.Media
对象通知我的位置,因为我的播放器正在播放视频?
这是一个跟踪1/4里程碑(25,50,75,100)的工作示例。
1。确保在s_code.js
文件
s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackMilestones="25,50,75,100";
Media模块在s_code中也是必需的。这是你需要的一段摘录
s.m_Media_c="var m=s.m_i('Media');m.cn=function(n){var m=this;return m.s.rep(m.s.rep(m.s.rep(n,'"''n'",''),'"''r'",''),'--**--','')};m.open=function(n,l,p,b){var m=this,i=new Object,tm=new Date,a='',"
+"x;n=m.cn(n);if(!l)l=-1;if(n&&p){if(!m.l)m.l=new Object;if(m.l[n])m.close(n);if(b&&b.id)a=b.id;if(a)for (x in m.l)if(m.l[x]&&m.l[x].a==a)m.close(m.l[x].n);i.n=n;i.l=l;i.o=0;i.x=0;i.p=m.cn(m.playerNa"
+"me?m.playerName:p);i.a=a;i.t=0;i.ts=0;i.s=Math.floor(tm.getTime()/1000);i.lx=0;i.lt=i.s;i.lo=0;i.e='';i.to=-1;i.tc=0;i.fel=new Object;i.vt=0;i.sn=0;i.sx='"'";i.sl=0;i.sg=0;i.sc=0;i.lm=0;i.lom=0;m.l"
+"[n]=i}};m._delete=function(n){var m=this,i;n=m.cn(n);i=m.l[n];m.l[n]=0;if(i&&i.m)clearTimeout(i.m.i)};m.close=function(n){this.e(n,0,-1)};m.play=function(n,o,sn,sx,sl){var m=this,i;i=m.e(n,1,o,sn,s"
+"x,sl);if(i&&!i.m){i.m=new Object;i.m.m=new Function('var m=s_c_il['+m._in+'],i;if(m.l){i=m.l['"'+m.s.rep(i.n,''"',''''''"')+''"];if(i){if(i.lx==1)m.e(i.n,3,-1);i.m.i=setTimeout(i.m.m,1000)}}');i.m."
+"m()}};m.stop=function(n,
2。将HTML5视频播放器绑定到Omniture
var html5Player = document.getElementById('video');
html5Player.addEventListener('loadedmetadata',playerHandler,false);
html5Player.addEventListener('play',playerHandler,false);
html5Player.addEventListener('pause',playerHandler,false);
html5Player.addEventListener('ended',playerHandler,false);
var videoOpened = false;
var currentTime = 0;
function playerHandler(e){
// window.console.log(e);//video meta
//window.console.log(e.type);
if (html5Player.currentTime > 0) {
currentTime = html5Player.currentTime;
}
switch(e.type){
case 'play':
if(!videoOpened){
window.console.log('opened');
s.Media.open(videoPageName, html5Player.duration, publicationName);
s.Media.play(videoPageName, 0);
}else{
window.console.log('play');
s.Media.play(videoPageName, currentTime);
}
// alert('currentTime: ' + currentTime);
// alert('duration: ' + Math.floor(html5Player.duration));
// alert('videoPageName: ' + videoPageName);
videoOpened = true;
break;
case 'pause':
window.console.log('pause');
s.Media.stop(videoPageName,currentTime);
break;
case 'ended':
window.console.log('ended');
s.Media.stop(videoPageName,currentTime);
s.Media.close(videoPageName);
break;
default:
break;
}
}
您似乎错过了一个通知s.Media持续时间的电话:
s.Media.open("some_video_name", videoDuration, videoSrc);
结合播放/暂停/寻找事件,应该让他们知道视频在总播放中所占的百分比。
我说大约是因为我怀疑它们基本上是在运行自己的内部秒表,它仍然可以从视频播放头漂移。例如,在HTML5视频中,除了暂停之外,你还需要捕捉"等待"事件。秒表将假设一个实时播放速率,而不处理其他非事件触发的原因,为什么视频可以播放,但没有及时推进(浏览器可能拒绝播放,因为视频已经在页面/站点的其他地方播放)。大概他们的秒表对他们的跟踪来说已经足够好了。
我不确定您是否已经找到了解决方案。但是为了trackMilestone,你可以在你的代码的Media monitor代码中添加以下代码:
var tracked10=false; //Variables used as "flags" to prevent the same code from running
var tracked90=false; //twice in the same video play.
s.Media.monitor = function (s,media) {
//Use this code with either JavaScript or Flash.
// eVar1 = Media Name
// event1 = Video Begins
// event2 = Reached 10%
// event3 = Reached 90%
// event4 = Reached 100%
if (media.event == "Open") { //Executes when the video opens.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event1";
s.events="event1";
s.eVar1 = media.name;
s.Media.track(media.name);
}
if ((!tracked10) && (media.percent >= 10) { //Executes at 10% complete.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event2";
s.events="event2"
s.eVar1 = media.name;
s.Media.track(media.name);
tracked10 = true;
}
if ((!tracked90) && (media.percent >= 90)) { //Executes at 90% complete.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event3";
s.events="event3"
s.eVar1 = media.name;
s.Media.track(media.name);
tracked90 = true;
}
if (media.event == "CLOSE") { //Executes when the video completes.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event4";
s.events="event4"
s.eVar1 = media.name;
s.Media.track(media.name);
var tracked10=false; //Reset flags values at Media.close if visitors can play
var tracked90=false; //additional videos without reloading the page.
}
};
- 视频HTML没有'无法在Internet Explorer 11上工作
- 播放当前视频时如何停止其他视频?JavaScript
- 使用Facebook live API创建实时视频对象时的隐私设置
- Brightcove获取/显示HTML中的当前视频标题和描述
- Twilio-显示所有连接参与者的远程参与者视频
- WebRTC视频聊天可以在FF中使用,但不能在Chrome中使用
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何检查用户在html5视频播放器中观看了完整的视频
- Fullpage.js-视频+背景在同一部分
- html5视频中的Youtube类型注释
- 角度p2p视频聊天-远程流是黑视频
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- Javascript-在视频中跟踪鼠标位置
- 为什么可以'我在视频js中查看HLS
- 如何在javascript中解析Dailymotion视频Url
- Mozilla没有;t在附加视频src后触发视频后台事件
- 使用javascript将视频从我的android应用程序上传到youtube
- JS Omniture视频跟踪/Brightcove
- 跟踪视频里程碑从自定义HTML5视频播放器到Omniture媒体模块