时间戳

首页 > 解决方案 > WordPress 网站上的 HTML5 视频背景无法在 Safari 浏览器上运行

html - WordPress 网站上的 HTML5 视频背景无法在 Safari 浏览器上运行

问题描述

最近我开发了一个使用 WordPress 主题的网站。这是网站网址。

https://hbutterfly.com/

我在英雄部分有一个 HTML5 视频背景。视频背景适用于 Firefox 和 Chrome。但它不适用于 Safari 浏览器。请检查以下代码。

<div class="nectar-video-wrap position-loaded" data-bg-alignment="" style="opacity: 1; width: 1366px; height: 100%;">
  <div class="nectar-video-inner">
        <video class="nectar-video-bg" width="1800" height="700" preload="auto" loop="" autoplay="" muted="" playsinline="" style="visibility: visible;width: 1366px;height: 769px;opacity: 1;">
           <source src="https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.webm" type="video/webm">
           <source src="https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.mp4" type="video/mp4">
        </video>
  </div>
</div>

此致。

标签： htmlcsswordpress

解决方案

如果您在 Safari 上检查控制台，您会看到以下错误：

加载资源失败：服务器响应状态为 404
https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.mp4

因为您的 MP4 文件不存在。

您的视频可以在某些浏览器上运行的原因是 Chrome 和 Firefox 都支持 WebM 格式。Safari 没有，所以它必须回退到不存在的 MP4。

因此，您只需上传两种视频格式。

推荐阅读