React中video组件使用YouTube链接作为src时视频无法加载怎么解决

原生HTML <video> 标签仅支持直接加载 .mp4、.webm、.ogg 这类格式的裸视频资源文件，而YouTube的常规播放链接是HTML网页地址，并非可直接解码的媒体资源，同时YouTube出于版权保护限制，也不会对外暴露直链视频地址，因此直接把YouTube链接填入<video>的src属性必然无法加载。

改用YouTube官方提供的嵌入方式，通过<iframe>标签加载专属嵌入链接，同时适配你原有的切换逻辑，具体修改如下：

1. 格式转换规则 #

首先对YouTube相关地址做转换：

• 普通观看链接转嵌入链接：将https://www.youtube.com/watch?v=视频ID转换为https://www.youtube.com/embed/视频ID
• 嵌入链接可追加参数实现原有video的特性，比如?autoplay=1&mute=1&loop=1&controls=1&playlist=视频ID，其中mute=1是浏览器允许自动播放的必填参数，loop特性需要搭配playlist=视频ID才能生效
• 缩略图直接使用YouTube公开的固定地址：https://img.youtube.com/vi/视频ID/default.jpg，无需嵌套video标签，加载速度更快

2. 修改MobVideo.js代码 #

import React, { useState, useRef } from "react";
import { Col, Container, Row } from "reactstrap";
import "./MobVideo.css";

// 抽离视频列表方便统一管理
const videoList = [
  // 原有直链视频示例
  {
    type: "native",
    src: "https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm",
    thumb: "https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"
  },
  // YouTube视频示例，替换为你自己的视频ID即可
  {
    type: "youtube",
    src: "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&controls=1&playlist=dQw4w9WgXcQ",
    thumb: "https://img.youtube.com/vi/dQw4w9WgXcQ/default.jpg"
  }
]

function MobVideo() {
  const mediaRef = useRef();
  const [currentVideo, setCurrentVideo] = useState(videoList[0]);

  const videoslider = (videoItem) => {
    setCurrentVideo(videoItem);
  };

  return (
    <div id="showreal" className="video-title">
      <h1>With video Url</h1>
      <div
        className="video-slider-container mt-4 mb-4"
        style={{ maxWidth: "100%" }}
      >
        {/* 根据视频类型渲染对应播放标签 */}
        {currentVideo.type === "native" ? (
          <video
            src={currentVideo.src}
            ref={mediaRef}
            className="slider"
            autoplay
            loop
            controls
          ></video>
        ) : (
          <iframe
            src={currentVideo.src}
            ref={mediaRef}
            className="slider"
            allow="autoplay; fullscreen; encrypted-media"
            frameBorder="0"
          ></iframe>
        )}
        
        <ul>
          {videoList.map((item, index) => (
            <li
              key={index}
              onClick={() => videoslider(item)}
            >
              <img src={item.thumb} alt="视频缩略图" />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default MobVideo;

3. 修改MobVideo.css适配样式 #

仅需要调整底部缩略图和iframe的样式即可，其他原有样式可以保留：

/* 替换原有的.video-slider-container ul li video相关样式 */
.video-slider-container ul li img {
  width: 50px;
  height: 30px;
  object-fit: cover;
  transition: all 0.3s;
}
.video-slider-container ul li img:hover {
  transform: scale(1.1);
}

/* 新增iframe适配样式 */
.slider {
  border: none;
}

• 如果不需要兼容原有直链视频，可以直接删掉类型判断逻辑，统一用iframe渲染，代码会更简洁
• 若要调整YouTube播放器的功能（比如隐藏logo、关闭结束后推荐视频等），可直接修改嵌入链接的参数实现
• 如果是国内用户使用，可按照同样逻辑替换为B站、腾讯视频等国内平台的嵌入链接，规则基本一致

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