HTML 视频标签在 Safari 和手机上不起作用答案

【问题标题】：HTML Video tag not working on safari and mobile phonesHTML 视频标签在 Safari 和手机上不起作用
【发布时间】：2016-06-25 04:41:39
【问题描述】：

我有以下代码用于在我的页面上自动播放视频。问题是该视频在桌面浏览器上运行良好，但在桌面 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、桌面 safari、移动 chrome、移动 firefox 等中遇到问题。所有移动浏览器
尝试在移动浏览器伴侣中打开网址。如果可以，则将controls属性添加到视频元素并点击Play按钮。希望对您有帮助..跨度>
如果我打开 url ant tap play 但在页面上我想自动播放不显示播放按钮，它可以工作。
正如下面的回答中所建议的那样，在大多数移动设备中这是不可能的......无论你做什么......它都需要用户发起一些事件......

标签： javascript jquery html css video

【解决方案1】：

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

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

加上这个source

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

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

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

【讨论】：