如何通过JavaScript动态修改Plyr.js的视频源并添加字幕？

你可以通过两种方式实现需求，直接在初始化时配置，或者初始化后动态设置：

方式一：初始化时直接配置 #

在创建Plyr实例时，通过options参数传入视频源和字幕信息：

const player = new Plyr('#my-player', {
  // 配置视频源
  sources: [
    {
      src: '你的视频文件路径.mp4', // 替换为实际视频地址
      type: 'video/mp4' // 视频MIME类型，根据实际格式调整
    }
  ],
  // 配置字幕
  tracks: [
    {
      kind: 'captions', // 类型设为captions表示字幕
      label: '中文', // 字幕菜单中显示的名称
      srclang: 'zh', // 语言代码
      src: '你的中文字幕文件.vtt', // 替换为实际字幕地址
      default: true // 设置为默认启用的字幕
    },
    // 可添加多语言字幕
    {
      kind: 'captions',
      label: 'English',
      srclang: 'en',
      src: '你的英文字幕文件.vtt'
    }
  ]
});

方式二：初始化后动态设置 #

如果需要在播放器初始化完成后再添加源和字幕，使用player.source属性赋值：

// 先初始化播放器
const player = new Plyr('#my-player');

// 后续动态设置视频源和字幕
player.source = {
  sources: [
    {
      src: '你的视频文件路径.mp4',
      type: 'video/mp4'
    }
  ],
  tracks: [
    {
      kind: 'captions',
      label: '中文',
      srclang: 'zh',
      src: '你的中文字幕文件.vtt',
      default: true
    }
  ]
};

注意事项 #

• 字幕文件需采用WebVTT格式，示例格式如下：

WEBVTT

00:00:00.000 --> 00:00:02.000
第一句字幕内容

00:00:02.500 --> 00:00:05.000
第二句字幕内容

• 若视频或字幕文件存放于不同域名下，需确保服务器配置了CORS跨域许可，否则会加载失败。

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