React项目中ReactPlayer嵌入Vimeo视频仅显缩略图无法播放求助

问题说明 #

在React项目中使用ReactPlayer嵌入Vimeo视频后，仅能看到视频缩略图，点击无法正常播放。

代码示例 #

import React from "react";
import ReactPlayer from "react-player"

function Home () {
  return( 
    <>
      <h1>Projects</h1>
      <div>
        <ReactPlayer
          url="https://vimeo.com/352786895"
        />
      </div>
    </>
  )
};

export default Home;

问题现象 #

仅显示Vimeo视频缩略图，无播放交互能力：

可行解决方向 #

• 启用播放控件：ReactPlayer默认未开启播放控制栏，添加controls属性可激活播放交互，同时可通过playing属性控制自动播放（注意浏览器自动播放策略限制）：

  <ReactPlayer
    url="https://vimeo.com/352786895"
    controls={true}
    playing={false}
  />
  

• 验证视频嵌入权限：确认目标Vimeo视频已开启嵌入权限，私有视频或未授权嵌入的视频无法在外部网站正常播放，可替换为公开可嵌入的Vimeo视频测试。
• 固定容器尺寸：播放区域尺寸异常可能导致交互失效，给包裹ReactPlayer的容器设置明确宽高，并让播放器自适应容器：

  <div style={{width: '640px', height: '360px'}}>
    <ReactPlayer
      url="https://vimeo.com/352786895"
      controls={true}
      width="100%"
      height="100%"
    />
  </div>
  

• 检查依赖版本：不同版本的ReactPlayer对Vimeo的支持存在差异，尝试升级或降级到稳定版本（如最新官方稳定版）。
• 查看控制台报错：打开浏览器开发者工具控制台，排查是否存在跨域、权限不足等报错信息，根据提示针对性修复。

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