javascript - HTML 视频标签不适用于 safari 和手机

Question

我有以下代码用于在我的页面上自动播放视频。问题是视频在桌面浏览器上运行良好，但在桌面 safari 和移动浏览器上它只显示封面图片而不是播放视频。我尝试了互联网上的几个解决方案，但似乎没有一个适合我。

       <section class="video-bg">
        <div class="embed-responsive embed-responsive-16by9">
          <figure class="overlay">
            <video autoplay class="embed-responsive-item" poster="videos/cover.jpg">
              <source src="videos/landing_page_video_vimeo5_converted.mp4" type="video/mp4">
              <source src="videos/landing page video vimeo5.ogg" type="video/ogg">
              <source src="videos/landing page video vimeo5.ogg" type="video/webm">
            </video>
            <figcaption>
              <h1>text</h1>
              <p>text</p>
              <p>text</p>
              <p>text</p>
              <a class="video-play" data-toggle="modal" data-target="#myModal"></a>
            </figcaption>
          </figure>
        </div>
      </section>

Answer 1

Apple 从 iOS 6.1 开始禁用自动播放功能，请参阅 here

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

加上这个source

 <source src="videos/landing page video vimeo5.ogg" type="video/webm">

应该是 .webm 因为你的类型是 video/webm

只是一个提示，尝试为源使用相同的名称，避免空格。