在HTML5中播放无限循环视频

3 回答

• 0

  loop 属性应该这样做：

  <video width="320" height="240" autoplay loop>
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
  </video>
  

  如果你对loop属性有问题（就像我们过去一样），请听一下 videoEnd 事件并在它触发时调用 play() 方法 .

  注1：我'm not sure about the behavior on Apple'的iPad / iPhone，因为它们对 autoplay 有一些限制 .

  注2：不推荐使用 loop="true" 和 autoplay="autoplay"

  回复于 2024-04-29T03:43:26+08:00
• 2

  截至2018年4月，Chrome（以及其他几个主流浏览器）现在也是require muted 属性 .

  因此，你应该使用

  <video width="320" height="240" autoplay loop muted>
    <source src="movie.mp4" type="video/mp4" />
  </video>
  

  回复于 2024-04-29T03:43:26+08:00
• 122

  您可以通过以下两种方式执行此操作：

  1）在视频元素中使用 loop 属性（在第一个答案中提到）：

  2）您可以使用 ended 媒体事件：

  window.addEventListener('load', function(){
      var newVideo = document.getElementById('videoElementId');
      newVideo.addEventListener('ended', function() {
          this.currentTime = 0;
          this.play();
      }, false);
  
      newVideo.play();
  
  });
  

  回复于 2024-04-29T03:43:26+08:00