iOS端Quasar/Vue.js中playsinline无效，视频默认全屏问题求助

1. 补全playsinline的WebKit前缀 #

iOS的WebKit内核要求必须同时设置playsinline和webkit-playsinline属性才能生效，仅单加一个不会起作用。不管使用Quasar的<q-video>组件还是原生<video>标签，都要同时配置这两个属性：

<!-- 使用Quasar的q-video组件 -->
<q-video
  src="你的视频地址"
  playsinline
  webkit-playsinline
  controls
></q-video>

<!-- 用原生video标签测试 -->
<video
  src="你的视频地址"
  playsinline
  webkit-playsinline
  controls
></video>

如果是通过代码动态生成视频元素，也要确保两个属性都被正确添加，不要遗漏WebKit前缀。

2. 排查Quasar组件的默认配置 #

Quasar的q-video组件可能存在默认的全屏相关配置，你可以先尝试直接用原生<video>标签测试。如果原生标签能正常实现内联播放，说明问题出在组件封装上，去查看q-video的官方文档，确认是否有默认开启的全屏属性需要手动关闭。

3. 遵守iOS自动播放规则 #

iOS对无用户交互触发的自动播放限制严格，即便加了playsinline，页面加载时自动播放的视频仍可能被强制全屏。建议将视频播放触发逻辑绑定到用户的点击、触摸等交互事件上，比如通过按钮点击后再调用video.play()方法。

4. 兜底方案：监听全屏事件强制退出 #

如果以上方法都无效，可以通过监听全屏相关事件，强制退出全屏状态：

// 监听全局全屏切换事件
document.addEventListener('webkitfullscreenchange', () => {
  if (document.webkitIsFullScreen) {
    document.webkitExitFullscreen();
  }
});

// 或者监听单个视频元素的全屏开始事件
const videoEl = document.querySelector('video');
videoEl.addEventListener('webkitbeginfullscreen', () => {
  videoEl.webkitExitFullscreen();
});

这种方法会出现短暂的全屏闪烁，体验不够流畅，但可以作为最后的兜底手段。

5. 检查模拟器环境配置 #

确认你的iOS模拟器版本不是过于老旧，旧版本WebKit对playsinline的支持存在bug。同时检查模拟器的设置，看是否有强制视频全屏的选项被开启。

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