Как предварительно загрузить видео, используя предварительную загрузку ссылки и сопоставить заголовки? - PullRequest
Новая
       20

Как предварительно загрузить видео, используя предварительную загрузку ссылки и сопоставить заголовки?

2 голосов
/ 19 марта 2019

Я пытаюсь предварительно загрузить видео, используя эту технику из Google , используя <Link ref='preload'>.

У меня есть простое приложение 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>
    );
  }
}

Приложение монтируется, а preloadVideo() срабатывает. И мое видео-образец загружается.

Однако, когда я нажимаю <button>, чтобы добавить этот URL-адрес видео в src видео, заголовки отличаются:

Предварительная загрузка для 'https://www.sample -videos.com / video123 / mp4 / 720 / big_buck_bunny_720p_30mb.mp4 ' найдена, но не используется, поскольку заголовки запроса не совпадают.

Каждое красное поле представляет:

  1. Начальная предварительная нагрузка.
  2. Загрузка видео, когда video src="" установлен через состояние.
  3. Предупреждение об использовании предварительной нагрузки.

enter image description here

Начальные заголовки предварительной загрузки

enter image description here

Заголовки загрузки видео

enter image description here

Документация MDN

После прочтения MDN документации по предварительной загрузке контента . Там написано:

Предварительная загрузка

имеет и другие преимущества. Использование as для указания типа загружаемого контента позволяет браузеру:

  • Более точное определение приоритетов загрузки ресурсов.
  • Соответствует будущим запросам, используя тот же ресурс, если это необходимо.
  • Применение правильной политики безопасности содержимого к ресурсу.
  • Установите для него правильные заголовки запроса Accept.

Так почему же мои заголовки отличаются? Вы можете явно установить заголовки?

Вот Codesandbox

...