在 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);
    };
  }, []);

根据窗口宽度动态加载视频的函数“loadVideo”是一个异步函数，因为我使用的是 React 提供的 Dinamic Import 语法，这是一个 Promise（我猜这是最大的问题）。这是我的完整组件，“loadVideo”函数在开头：

“./styles”文件是一个基于 styled-component lib 的组件，我用它来设置我的 html 的样式，没关系（我猜）。但是“视频”组件是来自 html 5 的视频标签。

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;

问题是背景视频没有播放。但是出现了海报图片，我不知道为什么只有海报图片起作用了。 我把那个console.log放在return之前试图找出发生了什么，这就是记录的内容：

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”第一次为我的状态属性分配了一个空值，然后，“useEffect”调用了“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;
} ...