文章/答案/技术大牛

发布

社区首页 >问答首页 >带有导航链接按钮的HTML视频播放器

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

Stack Overflow用户

提问于 2022-11-15 13:22:22

回答 1查看 73关注 0票数 0

有人能告诉我如何通过点击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>

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

video.js

html

html5-video

embed

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-18 07:47:07

您需要调用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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74446374

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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