如何在Vimeo Showcase嵌入中默认开启字幕

问题说明 #

我在网站中嵌入了名为Showcase的Vimeo播放列表，所有视频都配有字幕，希望默认开启字幕。单个视频可通过以下代码实现默认开字幕：

https://player.vimeo.com/video/[video_id]?texttrack=fr

但针对Showcase尝试以下代码后，字幕并未默认显示，只有点击“CC”按钮选择“French”才会出现：

https://vimeo.com/showcase/[showcase_id]/embed?texttrack=fr

解决方法 #

Vimeo Showcase的embed URL参数无法直接让所有视频默认开启字幕，需要借助Vimeo Player API实现，步骤如下：

1. 给嵌入的iframe添加id属性，方便API获取播放器实例：

<iframe id="vimeo-showcase" src="https://vimeo.com/showcase/[showcase_id]/embed" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

2. 引入Vimeo官方提供的Player SDK。

3. 添加JavaScript代码，监听视频加载事件并设置默认字幕：

// 获取播放器实例
const player = new Vimeo.Player('vimeo-showcase');

// 每次切换视频加载完成后，自动开启指定语言字幕
player.on('loaded', function() {
  // 将'fr'替换为你需要的字幕语言代码，比如'en'对应英文
  player.setTextTrack('fr', 'show');
});

这段代码会在Showcase播放列表切换到每个新视频时，自动开启指定语言的字幕，无需手动点击CC按钮选择。

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