如何使用JavaScript动态修改Vime.js视频播放器的播放源

你原有代码不生效的核心原因是<vm-player>是容器组件，不直接处理媒体资源加载，需要将源地址设置到它内部的媒体提供者（provider）实例上，同时要等待组件初始化完成后再操作API，避免调用失败。

修正后完整代码 #

(async () => {
  // 判空处理避免空指针报错
  const movieEl = document.querySelector("a[href$='.mp4']");
  if (!movieEl) return;
  const movie = movieEl.href;

  const player = document.querySelector('vm-player');
  if (!player) return;
  window.player = player;

  // 等待Vime组件完全初始化完成后再操作
  await player.whenReady();
  
  // 获取媒体提供者实例设置播放源
  const provider = player.provider;
  provider.src = movie;
  // 如需指定媒体类型可补充以下配置
  // provider.type = 'video/mp4';

  // 若需要设置后自动播放可添加此行，需符合浏览器自动播放策略
  // await player.play();
})();

关键修改说明 #

• 增加了元素获取的判空逻辑，避免页面不存在对应元素时报错
• 调用whenReady异步方法等待Vime自定义元素完全加载初始化，确保API调用正常
• 从player实例中获取provider实例，将播放源地址设置到provider上，符合Vime的API设计规范
• 支持可选配置媒体类型、自动播放等扩展需求

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