React导入视频后页面无法显示视频的问题求助

云上老周

2026-8-3

问题原因

你使用的YouTube链接是网页播放地址（https://www.youtube.com/watch?v=Nfs1vsDlrxI），并非视频文件的直接源地址。<video>标签仅支持加载MP4、WebM等格式的媒体文件直链，无法解析网页内容，所以即便请求状态码为200，也无法正常渲染视频。

解决方法

推荐使用YouTube官方提供的嵌入iframe方案，这是最稳定且合规的播放方式，修改后的代码如下：

import React from "react";

function Video() {
  return (
    <div className="video">
      <iframe 
        width="320" 
        height="240" 
        src="https://www.youtube.com/embed/Nfs1vsDlrxI" 
        title="YouTube video player" 
        frameBorder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowFullScreen
      ></iframe>
    </div>
  );
}

export default Video;