尝试循环播放 HTML5 视频数组

Trying to Loop an HTML5 Video Array

本文关键字：视频 数组 HTML5 播放 循环      更新时间：2023-09-26

我正在运行这个播放视频数组的数组，但突然结束并且不循环。当然，我尝试了HTML视频属性循环和循环="true"和循环="循环"...无济于事..

我只想循环'它'晚上：

var videos =
    [
        [
            "img/poster.png",
            "img/trippyInk.mp4"
        ],
        [
            "img/poster.png",
            "img/brothaDive.webm"
        ],
        [
            "img/poster.png",
            "img/wtuD97H.webm"
        ],
        [
            "img/poster.png",
            "img/ride.webm"
        ]
    ];
function switchVideo(n) {
    if (n >= videos.length) n = 0;
    var mp4 = document.getElementById("mp4");
    var parent = mp4.parentNode;
    document._video.setAttribute("poster", videos[n][0]);
    mp4.setAttribute("src", videos[n][1]);
    document._video.load();
    document._video.play();

我尝试了这个命令，这也不起作用。

    $('video').attr('loop','loop');
}

谢谢！

更新

制作一系列视频循环的关键是将循环逻辑添加到ended事件中。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>vidArray</title>
</head>
<body>
  <video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" controls width="480" height="auto">
    Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
  </video>
  <script>
    var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
    var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
    var vid = document.getElementById("vid");
    var n = videos.length;
    var cnt = 0;
    function playVideo(x) {
      var png = poster[x];
      console.log('poster: ' + png);
      var mp4 = videos[x];
      console.log('video: ' + mp4);
      vid.setAttribute('poster', png);
      vid.src = mp4;
      vid.load();
      vid.play();
    }
    vid.addEventListener('ended', next, false);
    function next() {
      cnt++;
      if (cnt < n) {
        playVideo(cnt);
      } else {
        cnt = 0;
        playVideo(cnt);
      }
    }
  </script>
</body>
</html>

我分离了数组，它有效。添加了一个按钮来循环浏览视频。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>vidArray</title>
</head>
<body>
  <video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" loop controls width="480" height="auto">
    Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
  </video>
  <button id="btn1">Next</button>
  <script>
    var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
    var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
    var n = videos.length;
    var cnt = 0;
    function switchVideo(n) {
      var vid = document.getElementById("vid");
      var png = poster[n];
      console.log('poster: ' + png);
      var mp4 = videos[n];
      console.log('video: ' + mp4);
      vid.setAttribute('poster', png);
      vid.src = mp4;
      vid.load();
      vid.play();
    }
    var btn1 = document.getElementById("btn1");
    btn1.addEventListener('click', function(e) {
      cnt++;
      if (cnt < n) {
        switchVideo(cnt);
      } else {
        cnt = 0;
        switchVideo(cnt);
      }
    }, false);
  </script>
</body>
</html>

我想你正在寻找：

$('video').attr('loop','loop');
相关文章：