#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,095
    Rep Power
    220

    Need some creative thinking... Update db -> how much of the video user watched...


    Hello;

    We got some really good tools. Php, Jquery, Ajax and Mysql. I wanna use them for this:

    I am doing a small marketing system where I need to update the database and store the amount of video watched by the user.

    I can use that, find the drop point, tag them and set email campaign to email them based on that.

    Since I don't have much control over video player, I currently do it with Jquery periodic updater and update the time on the page.

    Code:
    function update() 
    	{
    		  $.get("<?php echo base_url('update_plc1_views');?>", function(data) {
    		    $("#div_reload").html(data);
    		    window.setTimeout(update, 60000);
    		  });
    	}
    
    $(document).ready(function() {
      // run the first time; all subsequent calls will take care of themselves
      setTimeout(update, 1000);
      
    });
    This is ok but not great and very accurate!

    Is there a reliable way to check how much of the video has been watched? Wistia apparently uses webhooks to report this. But I wanna see if there is a way I could hand-code it myself so I don't have to rely on Wistia's api.

    Or maybe ever achieve this by Youtube embed.

    Thanks
  2. #2
  3. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,177
    Rep Power
    9644
    Can you access (via Javascript) any information about the video from the player? Current location? Play/paused state? Does it fire any events? Video players typically do have stuff like that.
  4. #3
  5. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,095
    Rep Power
    220
    Honestly I am not even sure how to check that

    Can you please help me?

    Here is Youtube API and Wistias.

  6. #4
  7. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,177
    Rep Power
    9644
  8. #5
  9. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,026
    Rep Power
    4101
    Both Youtube and Wistia have an API function to give you the current playback time. Youtube has player.getCurrentTime and Wistia has player.time.

    Wistia even has a secondsWatched function that will let you know what's been watch vs what's been skipped by seeking.

    As for getting that information to your site, just stick with a timer that will query the player for the elapsed time and push it to the server periodically. You'll probably want to make sure on the server you only accept the maximum watched time so if the user seeks backwards or the update requests arrive out of order you don't end up reducing their time watched.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  10. #6
  11. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,095
    Rep Power
    220
    Originally Posted by requinix
    What video player are you using?
    For YouTube I use this
    Code:
    <div><iframe src="https://www.youtube.com/embed/AcaeBJp-B6k?modestbranding=1&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0" width="560" height="315" frameborder="0"></iframe></div>
  12. #7
  13. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,095
    Rep Power
    220
    The ideal would be to pass you a user ID, and each min YT send me back view time and the user id.

    That was I update our db.
  14. #8
  15. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,095
    Rep Power
    220
    Originally Posted by kicken
    Both Youtube and Wistia have an API function to give you the current playback time. Youtube has player.getCurrentTime and Wistia has player.time.

    Wistia even has a secondsWatched function that will let you know what's been watch vs what's been skipped by seeking.

    As for getting that information to your site, just stick with a timer that will query the player for the elapsed time and push it to the server periodically. You'll probably want to make sure on the server you only accept the maximum watched time so if the user seeks backwards or the update requests arrive out of order you don't end up reducing their time watched.

    I got this working:


    Code:
    <!DOCTYPE html>
    <html>
      <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>
    
        <script>
          // 2. This code loads the IFrame Player API code asynchronously.
          var tag = document.createElement('script');
    
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
          // 3. This function creates an <iframe> (and YouTube player)
          //    after the API code downloads.
          var player;
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 'AcaeBJp-B6k',
              events: {
                'onReady': onPlayerReady
              }
            });
          }
    
          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
            event.target.playVideo();
         track();
          }
    
         var tracking = true;
    
          function track() {
      seconds = parseInt(player.getCurrentTime()) ;
      console.log('seconds:'+ seconds);
      if (seconds >  90)
      {
       console.log('Critical time passed');
       tracking = false; // stop tracking
      }
    
      if (seconds> 1 && seconds % 10 ==0)
      {
       // This is called every 10 seconds 
       console.log('every 10 seconds at '+ seconds);
      }
      if (tracking)
      {
       setTimeout(track, 1000);
      }
            
          }
    
        </script>
      </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo