Question

我有一个基于cdn的视频，但它不能在Firefox上播放。我有广泛使用的.htaccess文件：

https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/.htaccess

我知道firefox会将此解释为不正确的视频类型。但它仍然无效。

Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://{video-url}.mp4 failed. neils-imac.local:5757
HTTP "Content-Type" of "video/mp4" is not supported. Load of media resource http://{video-url}.webm failed. neils-imac.local:5757
HTTP "Content-Type" of "video/mp4" is not supported. Load of media resource http://{video-url}.ogv failed. neils-imac.local:5757
All candidate resources failed to load. Media load paused. neils-imac.local:5757
"Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

即使使用上面的脚本，无济于事也无法加载。我在机架空间CDN和本地都有相同的错误。

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_format，你应该使用.webm或.ogg for firefox和opera。您可以包含这两种格式，使其适用于所有现代浏览器

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Answer 2

如果您的路径不正确，就会发生此错误。如果您将视频存储在 src 文件夹中，请执行以下操作：

import background from "./assets/background.mp4"; // mine is stored in src/assets

function App() {
  return (
    <>
      <video src={background} autoPlay muted loop id="background-video" />
    </>
  );
}

否则，如果您的 Public 文件夹中有视频，那么您的导入路径将如下所示：

function App() {
  return (
    <>
      {/* my video is stored in public/assets */}
      <video src="/assets/background.mp4" autoPlay muted loop id="background-video" />
    </>
  );
}

（你不必在路径中写“Public”）

Firefox视频无法加载

2 个答案: