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

e0uiprwp 于 2022-11-20 发布在其他

关注(0)|答案(1)|浏览(140)

有人能告诉我如何通过单击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="" data-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>

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

Html

来源：https://stackoverflow.com/questions/74446374/html-video-player-with-navigation-link-button

1条答案

按热度按时间

b1zrtrql1#

你需要调用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);
  });
});

示例：https://jsbin.com/wesaficeba/edit?html,output

赞(0）回复(0）举报 2022-11-20

我来回答

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

1条答案

相关问题

热门标签

最新问答