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

Question

我正在尝试使用<Link ref='preload'>使用this technique from Google来预加载视频。

我在这里有一个简单的React App：

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>
    );
  }
}

该应用会挂载，并且preloadVideo()会触发。我的样本视频也被下载了。

但是，当我单击<button>将此视频URL添加到视频src时，标题不同：

  

找到了“ https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4”的预加载，但未使用，因为请求标头不匹配。

每个红色框代表：

1. 初始预载。
2. 通过状态设置video src=""时，正在加载视频。
3. 使用预加载的警告。

初始预加载头

视频加载标题

MDN文档

阅读MDN Documentation on preloading content之后。它说：

  

preload也具有其他优点。使用as来指定要预加载的内容类型，使浏览器可以：

     

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

那么我的标题为何不同？您可以显式设置标题吗？

这里是Codesandbox