点击按钮切换DIV内PHP视频页面仅首个有效，如何实现视频切换时终止原播放？

问题核心 #

你当前代码存在两个关键问题：

• 所有按钮的点击事件都硬编码为加载固定的/screen-spa.php，无论点击哪个按钮都只会加载同一个页面
• 切换频道时未停止之前的视频，导致旧视频在后台持续播放
• a标签内的ajaxpage函数与jQuery的load事件冲突，造成逻辑混乱

修复方案 #

1. 调整HTML结构

把每个按钮对应的目标页面地址存入data-url属性，移除a标签的javascript:伪协议，避免事件冲突：

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

<div id="pantalla"></div>

2. 重写JavaScript逻辑

先停止当前DIV内的所有视频播放，再加载目标页面：

$(function(){
  $(".button").click(function(){
    const pantalla = $("#pantalla");
    
    // 停止原生video标签的播放
    pantalla.find("video").each(function(){
      this.pause();
      this.currentTime = 0;
    });
    
    // 停止iframe嵌入的视频（如YouTube/Vimeo）
    pantalla.find("iframe").each(function(){
      this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
    
    // 加载对应目标页面
    const targetUrl = $(this).data("url");
    pantalla.load(targetUrl);
  });
});

额外注意

• 如果使用自定义播放器（如JWPlayer），需替换为对应暂停API，比如jwplayer().pause()
• 若需要拼接域名，可直接在data-url中填写完整URL，比如data-url="https://你的域名/screen-eng.php"
• 彻底移除原a标签内的ajaxpage调用，避免与jQuery的load事件冲突

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