在React with React Hooks上使用动态导入视频

Question

我正在制作一种带有全屏视频背景的个人网站。我需要为不同的屏幕大小加载不同的视频。我正在使用React，并基于React Hooks制作组件。

这些是我的依赖版本：

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",

在我的组件“VideoBackground”中，我使用useState创建了一个状态，我将在其中存储视频源和海报图像源，如下所示：

  const [video, setVideo] = useState({
    poster: null,
    src: null,
  });

我使用useEffect钩子作为componentDidMount函数，根据窗口宽度动态加载视频，并向浏览器中的事件侦听器添加一个函数，以便在每次调整大小时重新加载视频：

  useEffect(() => {
    async function handleResize() {
      setVideo(await loadVideo());
    }

    handleResize();

    window.addEventListener("resize", handleResize);
    window.addEventListener("orientationchange", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      window.removeEventListener("orientationchange", handleResize);
    };
  }, []);

基于windows宽度动态加载视频的函数“loadVideo”是一个异步函数，因为我使用的是React提供的Dinamic导入语法，这是一个promise（我想这是最大的问题）。这是我的完整组件，“loadVideo”功能位于开头：

“/styles”文件是一个基于样式化组件库的组件，我用它来设置html的样式，这没关系（我想）。但是“视频”组件是HTML5中的视频标签。

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

import { Video, Overlay, Content } from "./styles";

const VideoBackground = ({ children }) => {
  /*
   * Media query of the resource's intended media; this should be used only in a <picture> element
   *
   * Extra large devices (large laptops and desktops, 1200px and up)
   * Large devices (laptops/desktops, 992px and up)
   * Medium devices (landscape tablets, 768px and up)
   * Small devices (portrait tablets and large phones, 600px and up)
   * Extra small devices (phones, 600px and down)
   */
  async function loadVideo() {
    const { width } = getWindowDimensions();

    let posterPromise;
    let srcPromise;

    if (width > 1280) {
      posterPromise = import("../../assets/images/code720.jpg");
      srcPromise = import("../../assets/videos/code720.mp4");
    } else if (width > 720) {
      posterPromise = import("../../assets/images/code480.jpg");
      srcPromise = import("../../assets/videos/code480.mp4");
    } else if (width > 480) {
      posterPromise = import("../../assets/images/code320.jpg");
      srcPromise = import("../../assets/videos/code320.mp4");
    } else {
      posterPromise = import("../../assets/images/code240.jpg");
      srcPromise = import("../../assets/videos/code240.mp4");
    }

    const [{ default: poster }, { default: src }] = await Promise.all([
      posterPromise,
      srcPromise,
    ]);

    return {
      poster,
      src,
    };
  }

  /*
   * It returns the width of a window's content area
   */
  function getWindowDimensions() {
    const { innerWidth: width } = window;

    return {
      width,
    };
  }

  const [video, setVideo] = useState({
    poster: null,
    src: null,
  });

  useEffect(() => {
    async function handleResize() {
      setVideo(await loadVideo());
    }

    handleResize();

    window.addEventListener("resize", handleResize);
    window.addEventListener("orientationchange", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      window.removeEventListener("orientationchange", handleResize);
    };
  }, []);

  console.log("BEFORE RETURN", video);

  return (
    <>
      <Video playsInline autoPlay muted loop poster={video.poster}>
        <source src={video.src} type="video/mp4" />
      </Video>
      <Overlay />
      <Content>{children}</Content>
    </>
  );
};

VideoBackground.propTypes = {
  children: PropTypes.node.isRequired,
};

export default VideoBackground;

问题是背景视频没有播放。但是海报图像出现了，我不知道为什么只有海报图像起作用。我放了那个控制台。在返回之前记录，以尝试了解发生了什么，以下是记录的内容：

BEFORE RETURN {poster: null, src: null}
BEFORE RETURN {poster: null, src: null}
BEFORE RETURN {poster: "/static/media/code720.e66bf519.jpg", src: "/static/media/code720.83f62f35.mp4"}
BEFORE RETURN {poster: "/static/media/code720.e66bf519.jpg", src: "/static/media/code720.83f62f35.mp4"}

如您所见，视频和图像正常加载（但过了一段时间）。我认为问题是“useState”第一次给我的状态的属性分配了一个空值，就在这之后，“use效应”调用了“loadVideo”函数。

我第一次尝试导入并分配视频到“useState”，正常工作！但是，我不能有一个视频开始与"useState"，因为我需要知道屏幕大小之前，并下载适当的视频。

我还尝试使用"loadVideo"函数和"useState"，像这样：

const [video, setVideo] = useState(loadVideo());

但是，它不起作用，因为“loadVideo”是异步的。

有没有人对这个问题有什么解决办法，或者对我想做的事情有更好的方法？

谢谢你！

Answer 1

import（）没有加载视频，它只是获取URL。你可以同步完成。

import videoSrc720 from "../../assets/videos/code720.mp4";

if (width>1280) {
    src = videoSrc720;
} ...