求一键播放YouTube视频并启动进度条的实现脚本

实现思路 #

要完成这个需求，需要结合YouTube IFrame Player API控制视频播放，同时用原生JS实现进度条动画，通过按钮点击事件将两个动作绑定在一起。

第一步：HTML结构 #

先搭建基础页面元素：触发按钮、YouTube播放器容器、进度条容器

<!-- 触发按钮 -->
<button id="BAR">一键播放+启动进度条</button>

<!-- YouTube播放器容器 -->
<div id="youtube-player"></div>

<!-- 进度条容器 -->
<div style="width: 100%; height: 8px; background: #eee; margin-top: 20px;">
  <div id="progress-bar" style="width: 0%; height: 100%; background: #ff0000; transition: width 0.1s ease;"></div>
</div>

第二步：JavaScript逻辑 #

先加载YouTube API，再编写播放控制和进度条逻辑：

// 全局变量存储YouTube播放器实例和进度条定时器
let youtubePlayer;
let progressTimer;

// 加载YouTube IFrame Player API
function loadYouTubeAPI() {
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// API加载完成后初始化播放器
function onYouTubeIframeAPIReady() {
  youtubePlayer = new YT.Player('youtube-player', {
    height: '360',
    width: '640',
    videoId: 'YOUR_VIDEO_ID', // 替换成你的YouTube视频ID
    events: {
      'onReady': onPlayerReady
    }
  });
}

// 播放器准备就绪后绑定按钮点击事件
function onPlayerReady(event) {
  const barButton = document.getElementById('BAR');
  barButton.addEventListener('click', handleButtonClick);
}

// 按钮点击事件处理：同步播放视频+启动进度条
function handleButtonClick() {
  // 播放YouTube视频
  youtubePlayer.playVideo();
  
  // 重置进度条状态
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = '0%';
  
  // 清除之前的定时器，防止重复点击导致异常
  if (progressTimer) clearInterval(progressTimer);
  
  // 启动进度条动画（每秒增加1%，可调整速度）
  let progress = 0;
  progressTimer = setInterval(() => {
    progress += 1;
    progressBar.style.width = `${progress}%`;
    
    // 进度到100%时停止定时器
    if (progress >= 100) {
      clearInterval(progressTimer);
    }
  }, 100);
}

// 页面加载时启动API加载
window.onload = loadYouTubeAPI;

关键细节说明 #

• 视频ID替换：把代码里的YOUR_VIDEO_ID换成目标YouTube视频的ID（即视频URL中v=后面的字符串）
• 进度条速度调整：修改setInterval的第二个参数（单位毫秒），数值越小进度条推进速度越快
• 重复点击处理：每次点击按钮都会先清除旧定时器，避免多个定时器同时运行导致进度条混乱
• API依赖：必须加载YouTube官方的IFrame API才能实现视频播放控制，无法直接通过操作iframe元素完成

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