使用JavaScript与PHP实现动态视频内容切换教程

<!-- 初始HTML结构 -->
<div id="pantalla">
    <!-- 初始视频内容将加载到这里 -->
</div>

<!-- 按钮组 -->
<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-eng.php', 'pantalla');">Music videos</a></span>
<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-mov.php', 'pantalla');">Movie clips</a></span>
<!-- ...其他按钮 -->

<!-- 初始JavaScript -->
<script language="javascript">
$(function(){
  $(".button").click(function(){
    // 问题所在：这里硬编码了加载的页面，所有按钮都加载同一个页面
    $("#pantalla").load("/screen-spa.php");
  });
});
</script>

<div id="pantalla">
    <!-- 动态加载的视频内容将显示在这里 -->
</div>

<button class="button" data-address="/screen-eng.php">Music videos</button>
<button class="button" data-address="/screen-mov.php">Movie clips</button>
<button class="button" data-address="/screen-tvs.php">TV shows</button>
<button class="button" data-address="/screen-spa.php">Música en español</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $(".button").click(function(){
    // 获取当前被点击按钮的 data-address 属性值
    var address = $(this).attr("data-address");
    // 使用获取到的地址动态加载内容到 #pantalla
    $("#pantalla").load(address, function(response, status, xhr) {
      if (status == "error") {
        var msg = "抱歉，加载内容失败: " + xhr.status + " " + xhr.statusText;
        $("#pantalla").html(msg); // 显示错误信息
      }
    });
  });
});
</script>

<div id="page">
    <!-- 动态加载的视频内容将显示在这里 -->
</div>

<button class="btn" data-video-id="eng">English Videos</button>
<button class="btn" data-video-id="mov">Movie Clips</button>
<button class="btn" data-video-id="tvs">TV Shows</button>
<button class="btn" data-video-id="spa">Música en español</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
    $(".btn").click(function(){
        let videoId = $(this).attr("data-video-id");
        // 构建请求URL，将 videoId 作为 GET 参数传递给 ajax.php
        $("#page").load("ajax.php?video=" + videoId, function(response, status, xhr) {
            if (status == "error") {
                var msg = "加载视频失败: " + xhr.status + " " + xhr.statusText;
                $("#page").html(msg);
            }
        });
    });
});
</script>

<?php
// ajax.php

// 检查 'video' 参数是否设置，如果未设置则默认为 'eng'
$videoId = $_GET['video'] ?? 'eng';

// 根据 $videoId 的值输出不同的视频播放器
if ($videoId === 'eng') {
    // 英文视频示例
    ?>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/D6Ac5JpCHmI?autoplay=1" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
    <?php
} elseif ($videoId === 'mov') {
    // 电影剪辑视频示例
    ?>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/another/video_id?autoplay=1" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
    <?php
} elseif ($videoId === 'tvs') {
    // 电视剧视频示例
    ?>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/one/more/video_id?autoplay=1" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
    <?php
} elseif ($videoId === 'spa') {
    // 西班牙语视频示例
    ?>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/spanish/video_id?autoplay=1" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
    <?php
} else {
    // 默认或错误处理
    ?>
    <p>未找到指定视频内容。</p>
    <?php
}
?>