ReactJs中如何嵌入视频？Video元素视频不显示问题排查

问题1：视频路径解析失败 #

你直接在video标签的src属性填写相对路径./video.mp4，React组件编译时不会识别这种写法的静态资源路径，可选择任意一种方案修复：

• 方案1：将video.mp4文件移动到项目的public目录下，修改src属性为：

<video src={process.env.PUBLIC_URL + "/video.mp4"}></video>

• 方案2：在Video.js头部引入视频资源，再绑定到src属性：

import React from "react";
import "./Video.css";
// 引入视频资源
import videoSrc from "./video.mp4";

function Video() {
  return (
    <div className="video">
      <video src={videoSrc}></video>
    </div>
  );
}

export default Video;

问题2：video标签缺少必要配置 #

当前video标签没有设置宽高，也没有播放控制属性，就算路径正确也无法正常显示内容，修改video标签补充属性：

<video 
  src={videoSrc}
  controls // 显示播放、暂停、音量等控制按钮
  muted // 静音，搭配autoplay可实现自动播放
  playsInline // 移动端不自动全屏播放
  style={{ width: "100%", height: "100%", objectFit: "cover" }}
>
</video>

问题3：样式规则冲突 #

你在Video.css中重复定义了.video类的height属性：

.video {
    position: relative;
    border: 5px solid red;
    background-color: white;
    height: 500px; /* 第一个height定义 */
    width: 100%;
    height: 100%; /* 第二个height定义会覆盖前面的500px */
    scroll-snap-align: start;
}

如果你需要每个视频容器高度固定为500px，删除最后一行height: 100%即可。

内容的提问来源于stack exchange，提问作者Babilon