Chrome HTML5 视频未加载

Question

我在 React 中有一个视频组件，适用于 Firefox 和 Safari，但它不适用于 Chrome。作为完整性检查，我创建了一个新的 React 应用程序（如下）并添加了一个简单的视频标签，但视频无法在 Chrome 中加载，只能在 Firefox 中加载。我该如何解决这个问题？

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Test</h1>
      <video
        muted
        preload="metadata"
      >
        <source
          src={`http://localhost:8005/video/test.mp4`}
          type="video/mp4"
        />
      </video>
    </div>
  );
}

export default App;

Answer 1

使用 HTTPS：如果您在本地服务器上进行测试，请尝试对视频 URL 使用 HTTPS 而不是 HTTP。 Chrome 对 HTTP 内容有更严格的规则。