PHP网站实现不刷新页面，按数据库时间规则切换YouTube视频

要实现无需刷新页面就能定时检查数据库并切换视频，你需要结合前端JavaScript定时请求和后端PHP接口来完成，下面是具体的实现步骤和代码示例：

1. 编写后端PHP接口（用于查询符合条件的视频） #

首先，你需要创建一个独立的PHP文件（比如check_video.php），专门处理数据库查询并返回JSON格式的结果。这样前端可以通过AJAX请求获取数据，不用刷新整个页面。

<?php
// 假设你已经有数据库连接$db，这里确保连接正确
$id = $_GET['user_id']; // 从请求参数获取user_id
$p = $_GET['prog_id'];  // 获取prog_id

// 注意：这里一定要用预处理语句防止SQL注入！
$retrieval = "SELECT url, start_time, end_time FROM video WHERE user_id = ? AND prog_id = ?";
$stmt = mysqli_prepare($db, $retrieval);
mysqli_stmt_bind_param($stmt, "ii", $id, $p); // 假设user_id和prog_id是整数类型，根据实际调整
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$currentVideo = null;
$now = time(); // 获取当前时间戳

while($row = mysqli_fetch_assoc($result)){
    // 将数据库中的start_time和end_time转为时间戳，假设数据库中是datetime格式
    $start = strtotime($row['start_time']);
    $end = strtotime($row['end_time']);
    
    // 判断当前时间是否在区间内
    if($now >= $start && $now <= $end){
        $currentVideo = $row;
        break; // 找到符合条件的就停止循环
    }
}

// 返回JSON结果
header('Content-Type: application/json');
echo json_encode($currentVideo);
?>

重要提示：一定要使用预处理语句代替直接拼接SQL，避免SQL注入风险，这是Web开发的安全基本要求。

2. 前端JavaScript实现定时请求与视频切换 #

在你的页面中，嵌入YouTube播放器（可以用iframe或者YouTube Player API），然后用setInterval每30秒发送一次AJAX请求到上面的接口，获取符合条件的视频后更新播放器。

方法一：使用iframe直接切换视频 #

如果你的YouTube视频是用iframe嵌入的，最简单的方式是直接修改iframe的src属性：

<!-- 页面中的YouTube播放器容器 -->
<iframe id="youtube-player" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

<script>
// 定义定时检查函数
function checkAndSwitchVideo() {
    const userId = "你的用户ID"; // 替换为实际的user_id，比如从页面隐藏域获取
    const progId = "你的节目ID"; // 替换为实际的prog_id
    
    // 发送AJAX请求
    fetch(`check_video.php?user_id=${userId}&prog_id=${progId}`)
        .then(response => response.json())
        .then(data => {
            if(data && data.url){
                const player = document.getElementById('youtube-player');
                // 注意：YouTube的iframe链接需要符合格式，比如https://www.youtube.com/embed/视频ID
                // 如果数据库中存储的是完整embed链接，直接赋值；如果是普通视频链接，需要转换
                player.src = data.url + "?autoplay=1"; // 加上autoplay=1实现自动播放
            }
        })
        .catch(error => console.error('请求出错:', error));
}

// 页面加载完成后立即检查一次，然后每30秒检查一次
window.onload = function() {
    checkAndSwitchVideo();
    setInterval(checkAndSwitchVideo, 30000); // 30000毫秒=30秒
};
</script>

方法二：使用YouTube Player API（更灵活） #

如果需要更精细的控制（比如暂停、播放状态管理），推荐使用YouTube官方的Player API：

<!-- 加载YouTube Player API -->
<script src="https://www.youtube.com/iframe_api"></script>
<div id="youtube-player"></div>

<script>
let player;

// 初始化YouTube播放器
function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-player', {
        height: '315',
        width: '560',
        events: {
            'onReady': function() {
                // 播放器就绪后开始定时检查
                checkAndSwitchVideo();
                setInterval(checkAndSwitchVideo, 30000);
            }
        }
    });
}

function checkAndSwitchVideo() {
    const userId = "你的用户ID";
    const progId = "你的节目ID";
    
    fetch(`check_video.php?user_id=${userId}&prog_id=${progId}`)
        .then(response => response.json())
        .then(data => {
            if(data && data.url){
                // 提取视频ID：假设数据库中的url是https://www.youtube.com/watch?v=XXX或者embed链接
                let videoId;
                if(data.url.includes('embed/')){
                    videoId = data.url.split('embed/')[1].split('?')[0];
                } else if(data.url.includes('v=')){
                    videoId = data.url.split('v=')[1].split('&')[0];
                }
                
                if(videoId){
                    player.loadVideoById(videoId); // 加载并播放新视频
                }
            }
        })
        .catch(error => console.error('请求出错:', error));
}
</script>

3. 额外注意事项 #

• 时间格式一致性：确保数据库中的start_time和end_time是标准的日期时间格式（比如YYYY-MM-DD HH:MM:SS），这样strtotime才能正确转换为时间戳。
• 缓存问题：如果浏览器对AJAX请求有缓存，可以在请求URL后加上时间戳参数（比如&t=${new Date().getTime()}），避免获取旧数据。
• 错误处理：在前端和后端都要添加错误处理逻辑，比如数据库查询失败时返回合适的提示，前端请求失败时可以重试或者记录日志。
• 自动播放限制：现代浏览器对自动播放有严格限制，需要确保用户和页面有交互后才能自动播放，或者添加静音播放参数（比如&mute=1）。

内容的提问来源于stack exchange，提问作者Neel Vikmani