带导航链接按钮的 HTML 视频播放器答案

【问题标题】：HTML Video Player with Navigation Link Button带导航链接按钮的 HTML 视频播放器
【发布时间】：2022-11-18 16:09:42
【问题描述】：

谁能告诉我如何通过单击 E01-E02-E03 等来更改视频？

播放器中的视频只能从这里播放：<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />

当我单击 E01-E02-E03 时，它会直接打开链接。当我点击一集时，我希望它直接从播放器播放。做起来简单吗？此致

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
</head>

<body>
  <video id="videoPlayer" class="video-js vjs-big-play-centered" controls preload="auto" width="593" height="364" poster=d ata-setup="{}">
      <b>Season 1</b>
      <a href="https://vjs.zencdn.net/v/oceans.mp4">E01</a>
      <a href="https://vjs.zencdn.net/v/oceans.mp4">E02</a>
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
    </video>

  <script>
    const player = videojs('videoPlayer', {});
  </script>
  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>

</html>

我尝试将视频链接仅嵌入到文本中，但无法通过视频播放器播放

【问题讨论】：

stackoverflow.com/questions/55924894 可能重复。您需要点击事件来设置播放器的新来源，而不是链接到 URL。
谢谢你很有帮助，但我怎样才能让剧集嵌入链接通过播放器切换，<a href="#">E01</a> 它从链接切换，我也无法放置 src: 链接以查看是否切换属性
可能与您的问题无关，但是 video.js 的 <script> 标签应该在使用 videojs() 的脚本标签之上。

标签： html html5-video embed video.js

【解决方案1】：

您需要调用player.src() 来加载新的源。就像是：

// You'll want to be more specific than `a` of course
Array.from(document.querySelectorAll('a')).forEach(a => {
  a.addEventListener('click', e => {
    e.preventDefault();
    player.src(a.href);
  });
});

【讨论】：