html - 在 html 中再次播放视频后循环播放 html5 视频变黑屏

Question

我添加了一个代码用于将视频作为横幅播放，但面临一个问题，即每当视频播放完毕时出现黑屏并再次播放视频。

<div class="background-wrap">
  <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>

Answer 1

我已经在所有浏览器中对此进行了测试。请查看此标记中的属性，这也适用于您的情况。

  <video width="400" controls playsinline loop muted >
      <source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>

更新:Android 和 iOS 上较新版本的手机浏览器支持自动播放功能。但它仅在视频静音或没有音频 channel 时才有效。 :-)

有关更新部分的更多详细信息，请阅读: https://webkit.org/blog/6784/new-video-policies-for-ios/