WordPress页面iOS端视频与图片切换失效问题求助

问题根源分析 #

1. 浏览器检测逻辑失效：原代码用window.safari.pushNotification判断Safari，但iOS上的Chrome基于WebKit内核，不存在window.safari对象，会错误进入「显示视频」分支；
2. 视频格式不兼容：Safari（包括iOS全平台浏览器）不支持WebM格式，视频无法加载，而此时图片被设置为display:none，页面彻底空白；
3. JS语法错误：imagen.src('xxx')是错误写法，应该是imagen.src = 'xxx'，该错误会导致后续JS代码终止执行。

修复后的完整代码 #

<style>
/* 设置初始显示状态，避免JS加载前的空白 */
#video { display: block; }
#imagen { display: none; }
</style>

<video id="video" autoplay muted loop playsinline>
  <!-- 新增MP4源，适配iOS设备 -->
  <source src="https://elvientomedia.es/wp-content/uploads/2023/09/produccion-a-medida.mp4" type="video/mp4">
  <source src="https://elvientomedia.es/wp-content/uploads/2023/09/produccion-a-medida.webm" type="video/webm">
</video>

<img id="imagen" src="https://elvientomedia.es/wp-content/uploads/2023/08/Clientes-10.png" alt="Imagen alternativa" crossorigin="anonymous">

<script>
const video = document.getElementById('video');
const imagen = document.getElementById('imagen');

// 更可靠的Safari检测：覆盖桌面端Safari和iOS全平台浏览器
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || 
                 navigator.vendor.includes('Apple Computer, Inc.');

// 兼容逻辑：Safari或不支持WebM时显示图片，否则显示视频
if (isSafari || !video.canPlayType('video/webm')) {
  imagen.style.display = 'block';
  video.style.display = 'none';
} else {
  imagen.style.display = 'none';
  video.style.display = 'block';
}
</script>

关键修复点说明 #

• 新增MP4视频源：iOS设备仅支持MP4（H.264编码）格式视频，添加后可保证视频在iOS非Safari浏览器中正常加载；
• 优化浏览器检测：通过User-Agent和厂商信息判断，覆盖所有iOS平台浏览器（包括Chrome、Edge等WebKit内核浏览器）；
• 修复语法错误：将src()函数调用改为属性赋值src =，确保JS代码正常执行；
• 初始CSS兜底：设置默认显示状态，避免JS加载延迟导致的页面空白。

内容的提问来源于stack exchange，提问作者Fran Segura Cruz