【解决】ios浏览器的视频全屏播放问题

本网站的问题，就是ios浏览器随便点一个文章跳视频，为了解决 使用:webkit-playsinline

webkit-playsinline 是一个 iOS 特有的属性，用于在 iOS 上的 Web 应用中控制 <video> 元素的行为。默认情况下，iOS 的 Safari 浏览器会强制在全屏模式下播放视频，这意味着一旦用户点击播放，视频就会自动全屏显示，而不会在页面中内嵌播放。

为了在 iOS 上使视频在页面中内嵌播放，而不是全屏播放，我使用以下几个属性：

1. playsinline: 这是标准的 HTML 属性，用于指示视频应该内嵌播放，而不切换到全屏。
2. webkit-playsinline: 这是一个旧的 WebKit 前缀属性，在某些情况下仍然需要用来确保在 iOS 的 WebKit 浏览器中支持内嵌播放。

下面是一个简单的用法示例：

<video 
    src="video.mp4" 
    playsinline 
    webkit-playsinline 
    controls>
    The video tag.
</video>

注意事项：

• 在大多数现代浏览器中，使用 playsinline 属性已经足够。但是webkit-playsinline 更多是为了向后兼容旧版本的 Safari 浏览器。
• 为了视频在所有设备和浏览器中都能内嵌播放，所以同时使用这两个属性。

额外配置

如果你正在开发一个 PWA 或者移动端 Web 应用，并希望实现内嵌播放，请确保：

• 在 <meta> 标签中设置 viewport，以确保页面在移动设备上正确显示。
• 确保视频文件的 MIME 类型和编码适合移动设备播放。