实现办公Kiosk视频轮播后切换YouTube新闻流并定时切回

需求与问题 #

需要制作办公用Kiosk系统，实现以下流程：

• 循环播放本地广告视频
• 每段视频结束后，显示Sky News的YouTube嵌入流10分钟
• 10分钟后切换至下一个本地视频，重复上述流程

已实现本地视频轮播功能，但存在两个问题：

1. 尝试通过display:none或调整宽高隐藏iframe失败
2. 未实现定时切回本地视频的逻辑

现有视频轮播代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
  box-sizing: border-box;
}

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  max-height: 100%;
  max-width: 100%;
  background-color: black;
}

</style>
</head>
<body>
<video src="Video1.mp4" id="video" autoplay></video>

<script>
var vidElement = document.getElementById('video');
    var vidSources = [
      "Video1.mp4",
      "video2.mp4",
      "Video3.mp4"
      ];
    var activeVideo = Math.floor((Math.random() * vidSources.length));
    vidElement.src = vidSources[activeVideo];
    vidElement.addEventListener('ended', function(e) {
      // update the active video index
      activeVideo = (++activeVideo) % vidSources.length;
      if(activeVideo === vidSources.length){
        activeVideo = 0;
      }

      // update the video source and play
      vidElement.src = vidSources[activeVideo];
      vidElement.play();
    });
</script>
</body>
</html>

尝试的iframe代码 #

代码1

<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>

<script>
document.getElementById("youtubeplay").style.display = 'none';
</script>

代码2

<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>

<script>
var liveElement = document.getElementById('youtubeplay');
    liveElement.display = 'block'
    liveElement.style.max-height = '0%';
    liveElement.style.max-width = '0%';
</script>

解决方案 #

思路确认 #

你的核心实现思路是正确的：通过监听视频结束事件触发切换逻辑，结合定时器控制YouTube流的显示时长。之前的问题出在：

• iframe标签语法错误（未闭合）
• 元素显示/隐藏的JS写法错误
• 缺少定时器触发切回视频的逻辑

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全屏容器样式，视频和iframe共用 */
.fullscreen-player {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

/* 初始隐藏YouTube流 */
#youtubeplay {
  display: none;
  border: none;
}
</style>
</head>
<body>
<!-- 本地视频播放器 -->
<video src="Video1.mp4" id="video" class="fullscreen-player" autoplay></video>

<!-- YouTube嵌入流，注意闭合标签和参数配置 -->
<iframe 
  src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1&mute=0&loop=0" 
  title="Sky News Live" 
  id="youtubeplay" 
  class="fullscreen-player"
></iframe>

<script>
const vidElement = document.getElementById('video');
const youtubeElement = document.getElementById('youtubeplay');
const vidSources = [
  "Video1.mp4",
  "video2.mp4",
  "Video3.mp4"
];
let activeVideo = Math.floor(Math.random() * vidSources.length);
let timerId = null;

// 初始化播放第一个视频
vidElement.src = vidSources[activeVideo];

// 视频结束事件监听
vidElement.addEventListener('ended', switchToYouTube);

// 切换到YouTube流并启动定时器
function switchToYouTube() {
  // 隐藏视频，显示YouTube流
  vidElement.style.display = 'none';
  youtubeElement.style.display = 'block';
  
  // 10分钟后切回视频（10*60*1000毫秒）
  timerId = setTimeout(switchToVideo, 10 * 60 * 1000);
}

// 切回本地视频播放
function switchToVideo() {
  // 清除定时器（防止重复触发）
  clearTimeout(timerId);
  
  // 隐藏YouTube流，显示视频
  youtubeElement.style.display = 'none';
  vidElement.style.display = 'block';
  
  // 更新视频索引，播放下一个视频
  activeVideo = (activeVideo + 1) % vidSources.length;
  vidElement.src = vidSources[activeVideo];
  vidElement.play();
}
</script>
</body>
</html>

关键说明 #

1. 语法修复：补全了iframe的闭合标签，避免DOM解析错误
2. 样式优化：统一了全屏播放器的样式，通过display属性控制显示/隐藏，逻辑更清晰
3. 定时器逻辑：通过setTimeout实现10分钟后自动切回视频，同时用clearTimeout防止定时器冲突
4. YouTube参数配置：
   • controls=0：隐藏播放控件，适合Kiosk场景
   • autoplay=1：自动播放
   • mute=0：允许播放声音（若需要静音可改为1）
   • loop=0：不循环播放流（保持直播状态）
5. 视频索引优化：用(activeVideo + 1) % vidSources.length简化索引切换逻辑，无需额外判断边界

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