如何纠正 React.js 应用程序中加载视频非常慢的问题

Question

我有一个相当简单的 React 应用程序，当您打开应用程序时，它在第一个“页面”的顶部有一个循环视频。我与许多在线测试人员检查了整个应用程序，视频加载速度非常慢。

如此缓慢，它阻碍了应用程序获得任何 SEO 成功。该视频有 8.1 MB 大，质量很好，所以我不一定想失去一些质量。如何在 React 应用程序中缩短此类视频的加载时间？

视频.jsx

import React from 'react';
import './styles.scss';
import { Row, Col } from 'react-bootstrap';
import video from '../../media/video.mp4';

export default class Hero extends React.Component {
  render() {
    return (
      <div className="hero">
        <video
          className="desktop-video"
          resizemode={"cover"}
          style={{
            aspectRatio: 1,
            width: "100%",
          }} autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
      </div>
    );
  }
}

Answer 1

如果您在页面加载时强制加载自动播放的 8.1 MB 视频文件，那么您的 SEO 就应该被删除，因为这对用户来说非常糟糕。8.1 MB 比大多数整个网站的总页面负载还要大。如果有人使用移动设备并且有数据上限怎么办？如果有人的连接速度很慢怎么办？您确实应该通过编码优化和调整大小到较小的分辨率来尽可能减小视频文件的大小。

完成此操作并将其减少到 2-3 MB 后，您可以使用一些技巧，例如仅在页面加载完成后设置视频src，以有效“推迟”加载。不要忘记playsinlineiOS 的属性并包含海报图像作为占位符。