如何在iPhone设备的Outlook内置浏览器中实现MP4视频内联播放

解决方案 #

1. 补全video标签属性

iPhone端Outlook内置的WKWebView对非静音视频的内联播放有私有策略限制，仅靠playsinline和webkit-playsinline无法生效，需要补充muted属性，同时明确赋值布尔属性避免识别异常，修改后的标签如下：

<video 
  src="static/mp4video/themes/samplevideo.mp4" 
  playsinline="playsinline"
  webkit-playsinline="webkit-playsinline"
  muted
  controls
  preload="metadata"
>
</video>

如果需要视频播放时输出声音，可以绑定用户点击事件动态取消静音，符合iOS WebView的用户交互触发规则：

const video = document.querySelector('video');
video.addEventListener('click', () => {
  if (video.muted) video.muted = false;
});

2. JS强制覆写内联播放属性

部分版本的Outlook内置浏览器会在DOM渲染阶段覆盖标签上的内联播放属性，可以在DOM加载完成后主动强制赋值：

document.addEventListener('DOMContentLoaded', () => {
  const video = document.querySelector('video');
  video.setAttribute('playsinline', '');
  video.setAttribute('webkit-playsinline', '');
  video.playsInline = true;
  video.webkitPlaysInline = true;
});

3. 其他排查项

• 不要设置autoplay属性，Outlook的WebView会拦截非静音自动播放的视频，强制转为全屏原生播放，如有自动播放需求必须搭配muted属性使用
• 确认MP4视频使用H.264视频编码 + AAC音频编码，不符合编码规范的视频会被iOS系统强制调用原生播放器解码，触发全屏

极端场景兼容方案

如果以上方案都不生效，可以通过video.captureStream()接口获取视频流，用canvas逐帧渲染视频画面，完全脱离原生播放器的播放规则，仅适合短视频场景，性能开销高于原生video标签。

内容的提问来源于stack exchange，提问作者Gaurav Kumar