如何在Svelte中使用YouTube IFrame Player API

问题说明 #

把YouTube官方的IFrame Player API代码放到原生HTML的<script>标签里能正常运行，但在Svelte组件的脚本块中，无法识别API加载后生成的YT对象；同时需要在Svelte脚本中访问播放器实例，实现修改视频ID、获取播放时间等操作。

解决方案 #

1. 全局声明YT对象 #

Svelte脚本块默认是模块作用域，无法直接访问挂载在window上的YT对象，需要先做全局声明：

// JavaScript环境下直接声明全局变量
declare var YT: any;

// 或者通过window对象直接访问
const YT = window.YT;

2. 异步加载API脚本（避免重复加载） #

在组件挂载时加载API脚本，同时检查脚本是否已存在，防止重复加载：

import { onMount } from 'svelte';

let player;

onMount(() => {
  // 检查API脚本是否已加载
  if (!document.querySelector('script[src="https://www.youtube.com/iframe_api"]')) {
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  // 将回调挂载到window，API会全局调用该函数
  window.onYouTubeIframeAPIReady = () => {
    initPlayer();
  };

  // 若API已提前加载（比如其他组件已加载过），直接初始化播放器
  if (window.YT) {
    initPlayer();
  }
});

3. 初始化播放器并保存实例 #

编写初始化函数，创建播放器实例并保存到组件变量中，方便后续操作：

function initPlayer() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'playsinline': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 播放器就绪回调
function onPlayerReady(event) {
  event.target.playVideo();
}

// 播放状态变化回调
let done = false;
function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}

// 自定义操作示例：停止播放
function stopVideo() {
  player?.stopVideo();
}

// 自定义操作示例：切换视频ID
function changeVideoId(videoId) {
  player?.loadVideoById(videoId);
}

// 自定义操作示例：获取当前播放时间
function getCurrentTime() {
  return player?.getCurrentTime();
}

4. 组件模板部分 #

在模板中添加播放器容器和操作按钮：

<div id="player"></div>

<button on:click={() => stopVideo()}>停止播放</button>
<button on:click={() => changeVideoId('dQw4w9WgXcQ')}>切换视频</button>
<button on:click={() => alert(`当前播放时间：${getCurrentTime()}`)}>查看播放时间</button>

关键注意点 #

• onYouTubeIframeAPIReady必须挂载到window对象上，因为YouTube API会在全局作用域中查找这个函数。
• 要处理API已提前加载的情况，避免组件挂载时API已存在但未初始化播放器。
• 操作播放器实例时建议使用可选链操作符（?.），防止播放器未初始化时出现报错。

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