CODEWITHSUNDEEP
javascriptphpvideo
chiefo
chiefo

Reputation: 281

Get current playback time for multiple videos

I need to get the current playback time for multiple videos from database.

I want to save the playback video time in the database, so I can later set the correct position for the user when he comes in.

I am using setInterval to fire ajax every 4 seconds. Any help please?

Code

<?php

$tl="channel";
$ooa="playing";
$played="played";

$timeline = mysqli_query($con, "SELECT * FROM plays WHERE streamers_type ='$tl' AND played !='$played' GROUP BY streamers_id ORDER BY id ASC") or die ();

while($row = mysqli_fetch_array($timeline)) {
    $id = $row['id'];
    $file1 = $row['file1'];
    $video_name = $row['video_name'];
    $video_type = $row['video_type'];
    $about_video = $row['about_video'];
    $streamers_type = $row['streamers_type'];
    $streamers_id = $row['streamers_id'];
    $time_start = $row['time_start'];
    $time_stop = $row['time_stop'];
    $date = $row['date'];
    $streamers_name = $row['streamers_name'];
    $views = $row['views'];
    $played = $row['played'];

            ?>  
    <li class="col-lg-4 col-sm-5 col-xs-12 spinal">
    <b style="border:1px solid; color:red; margin-left:3px!important;"><?php echo $streamers_name ?></b>
    <span class="pull-right"><span id = "fhkj"><?php echo $views?></span>&nbsp; &nbsp;<i class="fa fa-eye"></i></span>
        <a class="fg" title="<?php echo $video_name ?>">
        <button data-toggle="modal" data-target="#modal-1" data-backdrop="static" data-keyboard="false"  class="fire" id="<?php echo $id ?>">

        <video class="uopi " id="<?php echo $video_name ?>" style="height:180px; width:100%!important;" autoplay muted onended="run();"><source src="plays/<?php echo $file1 ?>" type="<?php echo $video_type ?>"></video>

        <h2 style="background-color:#fff;color:orange; line-height:30px; font-size:1.3em;"><?php echo $video_name ?></h2>
            <span class="glyphicon glyphicon-play-circle"></span></button>

        </a>
    </li>
          }
     ?>




           <script type='text/javascript'> //function to update time    
         var vid = $('.uopi').attr('id');
   var ok = vid.currentTime;
      $(document).ready(function() {
     setInterval(function () {
          $.ajax({
          type : 'POST',
           url : 'updatetime.php', 
          data :  {ok: ok}, .
          success : function(r)
           {
          alert('Yay'); //would be commented out later dont really need any success just save

           }
    });

     }, 4000);
})   
</script>

Upvotes: 1

Views: 403

Answers (1)

Alberto Segura
Alberto Segura

Reputation: 445

First of all, fix the SQL Injection vulnerability in your SQL query (How can I prevent SQL injection in PHP?) :P

My reply to your problem is that you could use the 'beforeunload' event. If the user click a link or close the actual tab/window the code will be executed. You can use a code like that:

window.addEventListener("beforeunload", function(e){
   var vid = $('.uopi').attr('id');
   var ok = vid.currentTime;
   $.ajax({
        type : 'POST',
        url : 'updatetime.php', 
        data :  {ok: ok},
        success : function(r)
        {
            console.log('Yay'); 
        }
    });
}, false);

EDIT: You can also use video events like 'pause' to update the current time.

Upvotes: 1

Related Questions