html 如何点击视频更改视频源

Question

不好意思我的英文不是很好，在网上找了很多方法都没有成功。

我的想法：打开网站，会自动播放一段视频（A）。当鼠标点击视频（而不是某些按钮）时，视频 A 将替换为视频 B，并保持相同的大小和格式，并在同一网页上。而当再次点击鼠标时，视频B又变成了视频A。

这是我试过但失败的代码：

function setVideo() {

    document.getElementById("video-01").src="demo/2.mp4";

}

<div class="video" id="video-one" οnclick="setVideo()">

    <video id="video-01">
        <source src="demo/1.mp4" type="video/mp4"/>
    </video>  

</div>

我没有学过编程，所以我不知道该怎么做。我试过用 in HTML to link 到另一个视频，但这会改变页面的样式。

你能帮帮我吗？

Answer 1

像这样？

const videoA = 'https://media.istockphoto.com/videos/attractive-woman-blogger-speaks-about-professional-voice-over-and-video-id1253606799'
const videoB = 'https://media.istockphoto.com/videos/aerial-shot-flying-along-road-with-driving-vehicles-trucks-and-cars-video-id1251170644'
document.querySelector('video').addEventListener('click', (evt) => {
  const currentVideo = evt.target.getAttribute('src')

  if (currentVideo === videoA) {
    evt.target.setAttribute('src', videoB)
  } else {
    evt.target.setAttribute('src', videoA)
  }
})

<video autoplay muted width="480" height="320" src="https://media.istockphoto.com/videos/attractive-woman-blogger-speaks-about-professional-voice-over-and-video-id1253606799"></video>

html 如何点击视频更改视频源

How to click the video to change video source in html

html

javascript

video

onclick