Javascript 如何使用链接预加载和匹配标题预加载视频？

我正在尝试使用

预加载视频

我这里有一个简单的React应用程序：

class App extends Component {
  state = {
    videoUrl: null,
  };
  componentDidMount = () => {
    this.preloadVideo();
  };

  preloadVideo = () => {
    const link = document.createElement('link');

    const attributesAndValues = [{ key: 'rel', value: 'preload' }, { key: 'as', value: 'video' }];
    attributesAndValues.forEach(item => {
      link.setAttribute(item.key, item.value);
    });
    link.href = 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4';

    document.body.appendChild(link);
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <video controls src={this.state.url} />
        </header>
        <button
          onClick={() =>
            this.setState({
              url: 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4',
            })
          }
        >
          Set Video Url
        </button>
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
videoUrl:null，
};
componentDidMount=（）=>{
这个.preloadVideo（）；
};
预加载视频=（）=>{
const link=document.createElement（'link'）；
const attributesAndValues=[{key:'rel'，value:'preload'}，{key:'as'，value:'video'}]；
attributesAndValues.forEach（项=>{
link.setAttribute（item.key，item.value）；
});
link.href=https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4';
document.body.appendChild（链接）；
};
render（）{
返回(
这是我的国家({
网址：'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4',
})
}
>
设置视频Url
);
}
}

应用程序挂载后，

preloadVideo（）

启动。我的视频样本被下载了

但是，当我单击

将此视频url添加到视频src时，标题不同：

找到“”的预加载，但未使用，因为请求标头不匹配

每个红色框代表：

初始预载

通过状态设置

video src=”“

时加载视频

使用预加载的警告

初始预加载集管

视频加载头

MDN文档 看完这本书后。它说：

预加载还有其他优点。使用as指定要预加载的内容的类型可使浏览器：

• 更准确地确定资源加载的优先级
• 匹配未来的请求，在适当的情况下重用相同的资源
• 对资源应用正确的内容安全策略
• 为其设置正确的接受请求标头

那么为什么我的标题不同呢？你能显式地设置标题吗

---

这里有一个

你应该检查你的网络面板，因为没有预加载任何内容。根据这一点：，

链接rel=“preload”

不适用于视频。