JavaScript - 视频自动播放

Question

  <div class="header-container" role="banner">
      <div class="top-image test-top"></div>
      <div id="header-video-container" class="zoom">
         <img id="header-fallback" src="yourimage.jpg" alt="" />
         <video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
         </video>
      </div>
      <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
   </div>

   <div class="header-container" role="banner">
      <div class="top-image test-top"></div>
      <div id="header-video-container" class="zoom">
         <img id="header-fallback" src="yourimage.jpg" alt="" />
         <video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
         </video>
      </div>
      <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
   </div>

   <div class="header-container" role="banner">
      <div class="top-image test-top"></div>
      <div id="header-video-container" class="zoom">
         <img id="header-fallback" src="yourimage.jpg" alt="" />
         <video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
         </video>
      </div>
      <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
   </div>

大家好，我需要创建一个视频部分。主要交互是当每个视频 div 到达视频应该自动播放的屏幕时。我们不需要任何播放/暂停按钮。当它离开屏幕时，它应该会自动暂停。当它再次出现在屏幕上时，视频应该从头开始。我们可以这样做吗？我在这里附上了我的代码。我是java脚本的新手，所以请帮忙。谢谢:)

Answer 1

是的，正如其他人的建议，autoplay 属性是您的金票。