jPlayer 'progress' event not firing reliably

41 views
Skip to first unread message

Sean Kimball

unread,
Sep 2, 2020, 1:51:41 PM9/2/20
to jPlayer: HTML5 Audio & Video for jQuery

I'm trying to send jplayer progress to google at certain breakpoints i.e. 10%, 20%, 30% etc. But I'm not able to figure out why the progress event is not working.   here is my source:

<script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "[[*pagetitle]]",
            m4a: "[[!urlDecode? &url=`[[*AmazonPodcastLocationM4A]]`]]",
            ogg: "[[!urlDecode? &url=`[[*AmazonPodcastLocationOGA]]`]]",
            webm: "[[!urlDecode? &url=`[[*AmazonPodcastLocationWEBMA]]`]]",
            mp3: "[[!urlDecode? &url=`[[*AmazonPodcastLocationMP3]]`]]",
          });
        },

        ended: function() {
          //console.log('the player has ended... ');
          sendGoogleEvent('Ended');
        },
        progress: function() {
          var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
          console.log('inspector track progress event = ' + playerTime);

          if(playerTime % 10 === 0){
            console.log('sendGA event progress event = ' + playerTime);
            sendGoogleEvent('Progress');
          }
        },
        play: function() {
          //console.log('tracking play event from inti ');
          sendGoogleEvent('Play');
        },
        pause: function() {
          //console.log('tracking pause event from inti ');
          sendGoogleEvent('Pause');
        },
        stop: function() {
          // don't log this
          //console.log('tracking stop event from inti ');
          sendGoogleEvent('Stop');
        },
        seeking: function() {
          //console.log('tracking seeking event from inti ');
          sendGoogleEvent('Seeking');
        },
        seeked: function() {
          //console.log('tracking seeked event from inti ');
          sendGoogleEvent('Seeked');
        },
        cssSelectorAncestor: "#jp_container",
        swfPath: "/assets/jplayer/jplayer",
        supplied: "m4a,ogg,webma,mp3",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,

      });
    });

    function sendGoogleEvent(event){
      var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
      var realplayerTime = $("#jquery_jplayer").data("jPlayer").status.currentTime;
      //if(playerTime >= 0 && event === 'Seeked'){
        //event = 'Stopped';
        //var percent = (Math.round(playerTime / 10) * 10);
        //event = 'Stopped ' + percent + '%';
      //}
      gtag('event', event, {'event_category' : 'PodCast Events', 'event_label' : '[[*pagetitle]]', 'value' : playerTime});
      console.log('sendGoogleEvent: playertime/event/actual = ' + playerTime + ' / ' + event + ' / ' + realplayerTime);
    }

    $('.jp-stop-custom').click(function(event){

      event.preventDefault();
      //$("#jquery_jplayer").data("jPlayer").status.currentTime;
      var playerTime = Math.round($("#jquery_jplayer").data("jPlayer").status.currentPercentAbsolute);
      var percent = (Math.round(playerTime / 10) * 10);
      $("#jquery_jplayer").jPlayer('stop');
      gtag('event', 'Stopped', {'event_category' : 'PodCast Events', 'event_label' : '[[*pagetitle]]', 'value' : percent});
      console.log('sendGoogleEvent: STOP  = ' + playerTime);

    });
  </script>


and an example of the console output:

inspector track progress event = 0 2
inspector track progress event = 19 2
inspector track progress event = 22 2
inspector track progress event = 75 2
inspector track progress event = 78 3
inspector track progress event = 80
sendGA event progress event = 80
sendGoogleEvent: playertime/event/actual = 80 / Progress / 1228.78693


so the first question is really, how does the progress event actually work?   when does it fire and why does it seem to be so sporadic?

Second, is there a better way to get progress from jPlayer and send it to GA ?

-thanks
-sean
Reply all
Reply to author
Forward
0 new messages