Search code examples
phpjqueryajaxhtml5-videolong-polling

jQuery video keeps on reloading while dynamically setting src base on database change with ajax

I have a code which sets an h1 and a video's src dynamically by checking for changes in the database with ajax long polling. In my code, example if the value in my database column is 1 then h1 will print this is 1 and video will play video 1. Otherwise, h1 will display this is 0 and video will display video 0. The h1 updates it's content no problem but when the video updates, it keeps on reloading.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<h1>watch me change</h1>

<video controls>
<source 
src="http://musicmania.hol.es/app/resources//karaoke/bohemian_rhapsody.mp4"  
type="video/mp4" />
</video>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">  
</script>
<script src="change.js"></script>
</body>
</html>

changes.js

$(document).ready(function(){

setInterval(function(){

    $.get("change.php", function(data){
    result = JSON.parse(data);
    for(var i = 0; i < result.length; i++){
        console.log(result[i].playing); 

        res = result[i].playing;

        if(res == 1){
            $("h1").text("I changed");
            $("video").attr("src", "http://musicmania.hol.es/app/resources/karaoke/karaoke.mp4");
        }else if(res == 0){
            $("h1").text("change me");
            $("video").attr("src", "http://musicmania.hol.es/app/resources/karaoke/bohemian_rhapsody.mp4");
        }   
    }
});

}, 1000);

});

change.php

<?php  

$conn = mysqli_connect("localhost", "root", "", "notify") or die("can't connect");

$query = mysqli_query($conn, "SELECT * FROM playing");

$arrs = array();

while($rows = mysqli_fetch_object($query)) {
    $arrs[] = $rows;
}

echo json_encode($arrs);

?>
Solution

  • This is more or less what I was meaning - check that the source is not already set to what you would change it to on either condition - if the source is different then set new source or continue if it is the same.

    Another option would be to set some sort of flag in the sql results that indicate that the content in the browser should now change.

    $(document).ready( function(){


    var baseurl='http://musicmania.hol.es/app/resources/karaoke/';
    var src=baseurl+'bohemian_rhapsody.mp4';


    setInterval( function(){

        $.get("change.php", function( data ){
            var result = JSON.parse( data );
            for( var i = 0; i < result.length; i++ ){
                console.log( result[i].playing ); 

                var res = result[i].playing;


                if( res==1 ){
                    src=baseurl + 'karaoke.mp4';
                    if( $("video").attr('src') != src ) {
                        $("video").attr("src", src );
                        $("h1").text("I changed");
                    }
                } else {
                    src=baseurl+'bohemian_rhapsody.mp4';
                    if( $("video").attr('src') != src ) {
                        $("video").attr("src", src );
                        $("h1").text("change me");
                    }
                }
            }
        });
    }, 1000);
});

    original 

    $(document).ready(function(){
    setInterval(function(){
        $.get("change.php", function(data){

            var result = JSON.parse(data);
            var baseurl='http://musicmania.hol.es/app/resources/karaoke/';

            for(var i = 0; i < result.length; i++){

                console.log(result[i].playing); 

                var res = result[i].playing;

                if(res == 1){
                    $("h1").text("I changed");
                    /* I don't know if you could use if( $("video").attr("src") != baseurl+'karaoke.mp4' ?? */
                    if( $("video").getAttribute('src') != baseurl+'karaoke.mp4' ) $("video").attr("src", baseurl+"karaoke.mp4");
                }else if(res == 0){
                   $("h1").text("change me");
                   if( $("video").getAttribute('src') != baseurl+'bohemian_rhapsody.mp4' ) $("video").attr("src", baseurl+"bohemian_rhapsody.mp4");
                }   
            }
        });
    }, 1000);
});