我怎样才能拥有一个带有 Iframe/Html5 视频和阅读更多按钮的页面，其 src 和 href 值可以在 javascript 的帮助下更改？

Question

我的网站 (blogger) 上有一个页面，我希望在该页面上有多个 video/iframes 和一个按钮，用于获取有关视频的更多信息。但是在一个页面上有这么多 videos/iframes 可能会影响网站的搜索引擎优化和加载时间以及外观。

所以我只想在页面上有一个 video/iframe 和一个阅读更多按钮，下面有更多导航链接，以便于导航到其他视频。

这是我的代码：

<!-- if there's a video -->
<video id="video-id">
<source src="" type="video/mp4">
</video>
<!-- if there's an iframe -->
<iframe class="responsive-video" src="" allowfullscreen scrolling="no" allow="encrypted-media">
<button class="read-more" href="">Know More About This</button>
<hr style="opacity:0.2;">
<button class="btn-class" href="#" data-video="https://site.xyz/video-src.mp4" data-btn="https://site2.xyz/btn-href/">Video 1</button>
<!-- And Other Buttons Like This -->

你能告诉我在这种情况下可以使用的 javascript 吗？另外，我是 javascript 的新手，所以请在您的回答中具体说明。

谢谢。

Answer 1

只需单击按钮即可更改锚点上的视频 src 和 href 'Video 1'

function playVideo() {
  //Change video src
  document.getElementById("video-id").src = event.target.getAttribute('data-video')

  //Change anchor's href
  document.getElementById("read-more-btn").href = event.target.getAttribute('data-btn')

}

.read-more {
  text-align: center;
}

<video id="video-id">
  <source src="" type="video/mp4">
</video>
<div class="read-more">
  <a id="read-more-btn" href="">Know More About This</a>
</div>
<hr style="opacity:0.2;">
<button class="btn-class" onclick="playVideo()" href="#" data-video='https://www.w3schools.com/tags/movie.mp4' data-btn="https://site2.xyz/btn-href/" data-video="">Video 1</button>
<!-- And Other Buttons Like This -->

我怎样才能拥有一个带有 Iframe/Html5 视频和阅读更多按钮的页面，其 src 和 href 值可以在 javascript 的帮助下更改？

How can i have a page with a Iframe/Html5 Video and a Read More Button whose src and href value can be changed with the help of javascript?

html

javascript

video

iframe

html5-video