ionic-framework - Ionic 1.3 - iOS 10 beta 6 无法内嵌播放 mp4 视频

标签 ionic-framework html5-video ios10 xcode8-beta6

我试图让视频在 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>

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

最佳答案

这样做的原因是因为我们还需要添加不带 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 上有效。

关于ionic-framework - Ionic 1.3 - iOS 10 beta 6 无法内嵌播放 mp4 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38997633/

相关文章:

angular - Ionic 3文件夹结构

jquery 定制的 html5 视频在 ipod 中不起作用

html - 视频内容的容器div等高

javascript - 如何让 "back button"出现在 subview 中?

angular - ionic3 获取 http ://localhost:8100/null 404 (Not Found)

ios - 如何在 iOS 的 NSMutableURLRequest 中添加 HTTPBody?

文本太长时,iOS 10 TextField 密码(安全)卡住

audio - iOS : Play Spotify Audio in silent mode

cordova - 内容安全策略 Cordova 问题

javascript - HTML5 视频源属性