Suivi des étapes vidéo à partir d'un lecteur vidéo HTML5 personnalisé vers Omniture Media Module ?

Question

J'ai une application Javascript mobile qui crée de temps en temps de manière dynamique une page d'accueil. <video> sur l'écran. J'ai besoin de suivre la lecture des vidéos avec Omniture. J'ai lié l'élément play , pause , ended , seeking y seeked pour savoir si l'utilisateur a démarré une vidéo, l'a mise en pause, l'a reprise et l'a arrêtée (ou s'il a terminé de visionner la vidéo). Tout cela est mis en œuvre à l'aide d'appels tels que

s.Media.play("some_video_name", timePosition);

y

s.Media.stop("some_video_name");

Etc. Tout cela fonctionne actuellement.

Ce que je veux maintenant, c'est suivre les étapes positionnelles de 0, 25, 75 et 100 %, avec l'option trackMilestones mais je ne comprends pas comment les exemples que j'ai trouvés en ligne informent réellement le logiciel Omniture s.Media de l'endroit où ils se trouvent. Omniture ne pourrait pas savoir par magie où se trouve ma vidéo à moins d'attacher des gestionnaires d'événements à mon élément vidéo. Est-ce que c'est ce qu'ils font ?

Existe-t-il une méthode que je puisse appeler sur le s.Media pour l'informer de ma position pendant que mon lecteur joue une vidéo ?

Answer 1

Voici un exemple pratique qui permet de suivre 1/4 des étapes (25,50,75,100).

1) Assurez-vous que vous disposez des éléments suivants dans votre s_code.js fichier

s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackMilestones="25,50,75,100";

Le module médias est également requis dans le s_code. Voici un extrait de ce dont vous aurez besoin

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. lier le lecteur vidéo 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;
        }
    }

Answer 2

Il semble qu'il manque un appel qui informe s.Media de la durée :

    s.Media.open("some_video_name", videoDuration, videoSrc);

Ceci, en combinaison avec les événements lecture/pause/recherche, devrait leur permettre de savoir approximativement où en est la vidéo en pourcentage de la lecture totale.

Je dis approximativement parce que je soupçonne qu'ils font tourner leur propre chronomètre interne qui peut encore dériver par rapport à la tête de lecture de la vidéo. Par exemple, dans une vidéo HTML5, vous devez capturer l'événement "attente" en plus de la pause. Le chronomètre suppose une vitesse de lecture en temps réel et ne gère pas les autres raisons, non liées à un événement, pour lesquelles une vidéo peut être lue mais ne pas avancer dans le temps (le navigateur peut refuser la lecture en raison d'une vidéo déjà lue ailleurs dans la page/le site). On peut supposer que leur chronomètre est suffisamment performant pour leurs besoins de suivi.

Answer 3

Je ne sais pas si vous avez déjà trouvé la solution à ce problème. Mais pour suivre les jalons, vous pouvez ajouter le morceau de code suivant dans le code du moniteur de médias de votre code.

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.
}
};