Ionic 1.3 - iOS 10 beta 6 不能内联播放 mp4 视频

Posted 2023-02-24

【中文标题】Ionic 1.3 - iOS 10 beta 6 不能内联播放 mp4 视频

【英文标题】：Ionic 1.3 - iOS 10 beta 6 not playing mp4 videos inline

【发布时间】：2016-08-17 13:10:48

【问题描述】：

我正在尝试让视频在 ios 10 上内联播放，但在从 iOS beta 4 升级到 beta 6 后，这停止了工作。在我的 config.xml 中，我添加了这两行

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="true" /> 

然后在我的 html 模板上我有

<video src="img/demo.mp4" preload="auto" controls autoplay muted webkit-playsinline ></video>

我也试过了

<div class="video-container-inner">
    <img src="video.poster" class="img-responsive img-cover">
      <video id="article$index + 1" preload x-webkit-airplay="allow" webkit-playsinline="webkit-playsinline" class="videoPlayerSingle article$index + 1">
          <source src="video.url" type="video/mp4"/>
     </video>
</div>

你们有遇到过这个问题吗？你是怎么解决的？

【参考方案1】：

这样做的原因是因为我们还需要添加不带webkit前缀的playsinline，所以代码将是：

<div class="video-container-inner">
    <img src="video.poster" class="img-responsive img-cover">
      <video id="article$index + 1" preload x-webkit-airplay="allow" playsinline webkit-playsinline class="videoPlayerSingle article$index + 1">
          <source src="video.url" type="video/mp4"/>
        </video>
  </div>

这适用于我在 ionic 1.3 iOS 10 beta 6 上。

【讨论】：

实际上我必须从 config.xml 中删除 <preference name="MediaPlaybackRequiresUserAction" value="true" /> 才能使其正常工作