Видео jQuery продолжает перезагружаться, динамически настраивая базу src при изменении базы данных с помощью ajax

Question

Видео jQuery продолжает перезагружаться, динамически настраивая базу src при изменении базы данных с помощью ajax

У меня есть код, который динамически устанавливает h1 и src видео, проверяя изменения в базе данных с помощью длинного опроса ajax. В моем коде, например, если значение в столбце моей базы данных равно 1, то h1 напечатает это 1, и видео будет воспроизводить видео 1. В противном случае, h1 покажет это 0, а видео отобразит видео 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);

?>

1

ajax html5-video jquery long-polling php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Это более или менее то, что я имел в виду — проверьте, что источник еще не установлен на то, на что вы бы изменили его при любом условии — если источник отличается, то установите новый источник или продолжите, если он тот же.

Другой вариант — установить какой-либо флаг в результатах 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);
});

2