jQuery 视频不断重新加载，同时根据 ajax 的数据库更改动态设置 src

Question

我有一个代码，它通过 ajax 长轮询检查数据库中的更改来动态设置 h1 和视频的 src。在我的代码中，例如，如果我的数据库列中的值为 1，则 h1 将打印 this is 1，video 将播放 video 1。否则，h1 将显示 this is 0，video 将显示 video 0。h1 更新其内容没问题但是当视频更新时，它一直在重新加载。

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);

?>

Answer 1

这或多或少是我的意思 - 检查源是否已设置为您在任一情况下将其更改为的内容 - 如果源不同则设置新源或继续如果相同.

另一种选择是在 sql 结果中设置某种标志，指示浏览器中的内容现在应该更改。

$(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);
});

原创

$(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);
});

jQuery 视频不断重新加载，同时根据 ajax 的数据库更改动态设置 src

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

php

ajax

jquery

long-polling

html5-video