javascript - 如何在不显示 2 个视频的情况下创建 2 个视频标签？

Question

我想弄清楚如何为 1 个视频标签引用特定视频并创建另一个视频标签，其中没有任何视频，以便我的变量知道它是一个视频。问题是它会创建第二个空白视频。

<video id="videoTag1" controls>
  <source id="mp4_src" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4 " type="video/mp4">
  <source id="mp4_src" src="movie.mp4" type="video/mp4">
</video>

<video id="videoTag2" controls>
</video>

我如何在不使用另一个视频标签的情况下引用某个视频是视频，或者如何在不弹出第二个空白视频的情况下切换到第二个标签？

Answer 1

只需更改 javascript 中的 src:

// Some example videos
const srcs = [
  'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',
  'https://preview.redd.it/47zk247yufg31.gif?format=mp4&s=21e1fc3ab5d02d77762094026716fe5ae6fce0dc'
];

let video = document.getElementById('video');
let source = document.createElement('source');

// Set the inital video src and play
source.setAttribute('src', srcs[0]);
video.appendChild(source);
video.play();


let i = 1; // current index for example
// Update src and play
function changeVideo() {
  i = i ? 0 : 1;
  video.pause();
  source.setAttribute('src', srcs[i ? 0 : 1]);
  video.load();
  video.play();
}

<video id="video" controls>
</video>
<button id="changeSource" onClick="changeVideo()">Change video</button>

希望对您有所帮助，