Question

HTML男女是

<video autoplay id="myvideo">
 <source id="vmp4" src="v1.mp4" type="video/mp4">
 <source id="vogg" src="v1.ogg" type="video/ogg">
 <p>Your browser does not support this video format.</p>
</video>

我想做的是在页面加载后并在显示video1.mp4的末尾，在5秒钟后切换到video2.mp4，并连续重复此操作。即。 video1> 5s> video2> 5s> video1> ...

var myvideo1 = ["v1.mp4", "v2.mp4"]
var myvideo2 = ["v1.ogg", "v2.ogg"]
var vi1=0;
var vi2=0;
function rotatevid() {
document.getElementById("myvideo").addEventListener("ended",switchvideo,false);
function switchvideo(e) {
  vi1++;
  vi2++;
  if (vi1==myvideo1.length) {
    vi1=0;
  }
  if (vi2==myvideo2.length) {
    =0;
  }
  document.getElementById("vmp4").src=myvideo1[vi1];
  document.getElementById("vogg").src=myvideo2[vi2];
}
setTimeout(rotatevid(), 5000);
}

Answer 1

已解决，正在更新答案

<video id="myvideo" controls autoplay>
  <source id="vmp4" src="v1.mp4" type="video/mp4">
  <source id="vogg" src="v1.ogg" type="video/ogg">
  <p>Your browser does not support this video format.</p>
</video>

<script>
  var count = 1;
  var vid = document.getElementById("myvideo");
  vid.addEventListener("ended", switchvideo, false);
  function switchvideo(e) {

    if (count % 2 === 0) {
      vid.setAttribute('src', 'v1.mp4');
    } else {
      vid.setAttribute('src', 'v2.mp4');
    }
    count++;
    vid.load();
    try {
      setTimeout(()=>vid.play(), 2000);
    } catch (err){
       console.log(err)
    }
  }
</script>

这是一个有效的代码。只需确保在保存此HTML文件的同一文件夹中有v1.mp4和v2.mp4。

Answer 2

您可以为此使用bootstrap框架。特别是，您可以使用carousel组件。

切换到另一个视频并连续重复

2 个答案: