使用Angular在iPhone iOS 10上自动播放内联视频

从iOS 10开始，移动版（iPhone和iPad）上的Safari开始允许开发人员以内联方式自动播放视频，前提是您要播放的视频满足某些条件。 在此之前，您的视频不会自动内联播放，并且在播放时只能全屏播放。 进行这些更改是为了防止“具有声音自动播放功能的网站”，如果您曾经浏览过手机上的某个站点并且开始播放烦人的视频广告，则可能是由于内联视频自动播放功能引起的，但还有其他原因内联视频HTML属性的合法使用。

视频作为GIF动画

我们都同意，GIF很酷，但是在幕后它们却是巨大的对象，就性能而言，GIF绝对不是网络上的最佳格式。

GIF将比例缩放到几兆字节的情况并不罕见，具体取决于质量，帧速率和长度。 如果您想提高网站的加载性能并帮助用户减少数据使用量，那么动画GIF就是与该目标不兼容的。

解决此问题的一种方法是将这些巨大的文件转换为压缩的精益视频，这样既可以保持较高的分辨率，又可以为用户节省大量数据。

自动播放静音

简而言之，视频要在移动浏览器中内联播放，需要将以下关键属性添加到video标签中（取决于移动平台）。

• 自动播放
• 静音
• 内线

Chrome For Android仅需要前两个，但是如果您使用的是Safari，则需要添加iOS 10中引入的playsinline属性。跨浏览器兼容的代码如下所示：

在最新的浏览器和平台上，这将使您的视频内联自动播放，并具有loop属性，使您的视频实质上充当GIF。

它不起作用！

我在上一段的最后一句话中强调了大部分内容，因为您肯定会遇到无法使用的情况。 我的具体案例是运行自定义WebView渲染Angular应用的iOS 10和11 iPhone。 根据iOS autoplay技术指南中的规定，该应用程序中的视频标签会在用户与页面互动后立即尊重autoplay属性，但只会忽略playsinline属性并全屏播放视频。 最终，它需要花很多时间进行Google搜寻和反复试验，但如果遇到相同的错误，请检查以下内容以使其正常运行：

• 如果您要定位的是iOS 11，请确保设备未在低功耗模式下运行。如果您使用的是Android版Chrome浏览器，则数据保护程序模式也会阻止自动播放。
• 在您的WebView中，确保为WebView设置了allowsInlineMediaPlayback配置。 我用了：

  webView.configuration.allowsInlineMediaPlayback = true 

  如果 #available （ iOS 10.0，*）{ 

  webConfiguration.mediaTypesRequiringUserActionForPlayback = [] 

  } 其他 { 

  //早期版本的后备 

  webConfiguration.mediaPlaybackRequiresUserAction = false 

  } 

• 安装iPhone-Inline-Video：如果您想支持iOS的早期版本（8和/或9）甚至是iOS 10的嵌入式视频播放，正如我发现的那样，此库“在iOS 8和iOS上启用iOS 10的playsinline属性9（几乎是polyfill）”。

静音属性问题

启用上述所有步骤后，无论我如何尝试，我仍然无法在运行iOS 10的iPhone SE上内联播放视频。 这篇文章引起了我的注意， 如上所述 ，不仅需要将视频NEEDS静音以考虑autoplay属性，而且muted属性本身可能无法在所有浏览器上宣传，并且解决了这个问题为了我。 检查video元素后，我发现即使在HTML中设置了muted属性，DOM元素也显示了muted=false 。 我仔细检查了FFMpeg，以确保我的mp4文件确实不包含音轨并且没有！ 唯一的逻辑推论是，某些内容在浏览器级别已损坏，从而导致将Muted属性不适用于DOM。 最后，结合使用iphone-inline-video和动态触发play属性为我提供了一种跨浏览器兼容的方式来内联播放视频。 我最终的Angular代码看起来像

  ＃在我的component.html中 

如果碰到

  NotAllowedError（DOM异常35）：在当前上下文中，用户代理或平台不允许该请求，这可能是因为用户拒绝了权限。 

这绝对表明浏览器阻止了自动播放，这很可能是由于muted属性存在问题。 使用上面列出的解决方案，看看是否可以解决您的问题。