HTML 视频标签在野生动物园和手机上不起作用

HTML Video tag not working on safari and mobile phones

本文关键字：手机 不起作用 动物园 视频 标签 HTML      更新时间：2023-09-26

我有以下代码用于在我的页面上自动播放视频。

问题是视频在桌面浏览器上运行良好，但在桌面 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>

苹果从iOS 6.1开始禁用自动播放功能，请参阅此处

在 iOS 上的 Safari 中（适用于所有设备，包括 iPad），用户可以 在蜂窝网络上，并按数据单位收费，预加载和 自动播放被禁用。在用户启动之前，不会加载任何数据。 这意味着 JavaScript play() 和 load() 方法也是非活动的。 直到用户启动播放，除非 play() 或 load() 方法 由用户操作触发。换句话说，用户发起的播放 按钮有效，但onLoad="play()"事件不起作用。

加上这个source 

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

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

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

相关文章：