点击MySQL视频列表表格行后，如何跳转至新页面播放大尺寸对应视频？

我来帮你搞定这个需求！咱们分两步走：先修改现有的视频列表页面，让表格行可点击并传递视频参数；再创建一个详情页面来展示大尺寸的视频和完整信息。

第一步：修改视频列表页面的代码 #

你需要给表格的每一行添加点击事件，点击后跳转到详情页，并把对应的videoRef作为参数传过去。这里我用了内联的onclick事件（简单直接），也给行加了鼠标指针样式提升用户体验：

<?php
$result=mysqli_query($link, "SELECT * FROM videos") or die( mysqli_error($link) );
echo "<table border=0><tr><th>Title</th><th>Creator</th><th>Upload Date</th><th>Difficulty</th><th>Video</th></tr>";
while ($data = mysqli_fetch_array($result) ){
    // 给每行添加点击跳转逻辑，用urlencode处理特殊字符避免出错
    $detailUrl = "video-detail.php?ref=" . urlencode($data['videoRef']);
    echo "<tr onclick=\"window.location.href='$detailUrl'\" style=\"cursor: pointer;\">";
    echo "<td>" . $data['Title'] . "</td>";
    echo "<td>" . $data['Creator'] . "</td>";
    echo "<td>" . $data['Upload Date'] . "</td>";
    echo "<td>" . $data['Difficulty'] . "</td>";
    echo "<td>" . '<iframe width="350" height="200" src="https://www.youtube.com/embed/'.($data['videoRef']).'" allowfullscreen> </iframe>' . "</td>";
    echo "</tr>";
}
echo "</table>";
?>

第二步：创建视频详情页面（video-detail.php） #

这个页面负责接收传递过来的videoRef参数，从数据库查询对应视频的完整信息，然后展示大尺寸的YouTube视频。重点提醒：一定要用预处理语句防止SQL注入，保障数据安全：

<?php
// 这里需要和列表页一样的数据库连接代码，替换成你的数据库信息
$link = mysqli_connect("localhost", "your_username", "your_password", "your_db");
if (!$link) {
    die("Connection failed: " . mysqli_connect_error());
}

// 检查是否有合法的videoRef参数
if(isset($_GET['ref']) && !empty(trim($_GET['ref']))){
    $videoRef = trim($_GET['ref']);
    
    // 使用预处理语句查询，避免SQL注入风险
    $stmt = mysqli_prepare($link, "SELECT * FROM videos WHERE videoRef = ?");
    mysqli_stmt_bind_param($stmt, "s", $videoRef);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $video = mysqli_fetch_array($result);
    
    if($video){
        // 展示视频详情和大尺寸播放器
        echo "<div style=\"max-width: 1200px; margin: 0 auto; padding: 20px;\">";
        echo "<h1>" . htmlspecialchars($video['Title']) . "</h1>";
        echo "<div style=\"margin: 15px 0;\">";
        echo "<p><strong>Creator:</strong> " . htmlspecialchars($video['Creator']) . "</p>";
        echo "<p><strong>Upload Date:</strong> " . htmlspecialchars($video['Upload Date']) . "</p>";
        echo "<p><strong>Difficulty:</strong> " . htmlspecialchars($video['Difficulty']) . "</p>";
        echo "</div>";
        // 大尺寸播放器，用16:9标准宽高比适配观看体验
        echo '<iframe width="853" height="480" src="https://www.youtube.com/embed/'.htmlspecialchars($video['videoRef']).'" allowfullscreen style="border: none;"></iframe>';
        echo "</div>";
    } else {
        echo "<p style=\"text-align: center; margin-top: 50px;\">Sorry, this video doesn't exist.</p>";
    }
    
    mysqli_stmt_close($stmt);
} else {
    echo "<p style=\"text-align: center; margin-top: 50px;\">Invalid video request.</p>";
}

mysqli_close($link);
?>

额外的优化小建议 #

• 如果你觉得内联onclick不够优雅，可以用JavaScript事件委托来处理表格行的点击事件，代码会更整洁。
• 给详情页的播放器加响应式样式，比如width: 100%; height: auto;，让它能适配不同屏幕尺寸。
• 给列表页的表格行加hover效果，比如tr:hover { background-color: #f5f5f5; }，让用户更直观地知道这行是可点击的。

内容的提问来源于stack exchange，提问作者Andrew C