Captive Network Assistant 浏览器 - 视频无法在 iPad、iPhone 设备上播放

编程问答 2022-04-28

问题描述

我使用 OpenWrt 基础 nodogsplash 包创建了一个强制门户/登陆页面。

问题：HTML5 视频无法在 iPhone、iPad Captive 浏览器上播放。 视频在 Safari 浏览器中可以正常播放，但 CNA 的某些限制阻止了播放。 在 iPhone、iPad 上，视频嵌入与海报和播放按钮一起显示。按下播放按钮没有任何作用。

在 Andriod 基础设备上一切正常。

HTML 页面中的视频代码

<video height="100%" width="100%" preload="auto"  webkit-playsinline="" playsinline="">
  <source src="sample.mp4" type="video/mp4">
</video>

CNA 页面视频问题的屏幕截图：

基本的 HTML 代码

enter image description here

错误信息 - 无

使用 videojs npm 包 - https://videojs.com/getting-started/

enter image description here

错误消息 - 无法加载媒体，原因可能是服务器或网络出现故障，或者格式不受支持。

解决方法

这不是openwrt nodogsplash的问题

我在 iPhone 和 iPad 等苹果设备上遇到了同样的问题，我关闭了低功耗模式并且它起作用了，您还应该在视频标签中包含 playinline 属性，如下所示：

<video class="video-background" autoplay loop muted playsinline>

它只在包含 playinline 时有效。

captiveportalhtmliosiosopenwrtopenwrtvideovideo