我有一个代码，它通过使用ajax长轮询检查数据库中的更改来动态设置h1和视频的src。在我的代码中，例如，如果我的数据库列中的值为 1，则 h1 将打印为 1，视频将播放视频 1。否则，h1 将显示此为 0，视频将显示视频 0。h1更新它的内容没有问题，但是当视频更新时，它会继续重新加载。
索引.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>
变化.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);
});
改变.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);
?>
这或多或少是我的意思 - 检查源是否尚未设置为您在任一条件下将其更改为的内容 - 如果源不同，则设置新源或继续，如果它相同。
另一种选择是在 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);
});