Как воспроизвести частное облачное видео в веб-приложении React ⇐ Javascript

[Anonymous]

Я пытаюсь следовать этому примеру
https://github.com/cloudinary-community ... deo-player
с той лишь разницей, что я хочу сделать это для частного видео
Вот шаги, которые я выполнил:

• загрузил видео в Cloudinary через портал, отметьте это как личное
  
• добавьте следующий код в index.html
  в

  Код: Выделить всё

  в добавьте

  Код: Выделить всё

• Создайте VideoPlayer.js

  Код: Выделить всё

  import { useEffect, useRef } from 'react';
  
  function VideoPlayer(props) {
  const { width , height } = props;
  const cloudinaryRef = useRef();
  const videoRef = useRef();
  
  useEffect(() => {
  if (cloudinaryRef.current ) return;
  cloudinaryRef.current = window.cloudinary;
  cloudinaryRef.current.videoPlayer(videoRef.current, {
  cloud_name: 'abc-examples'
  })
  }, []);
  
  return (
  
  )
  }
  
  export default VideoPlayer;
  

  Использовать в файле tsx

  Код: Выделить всё

  {word.youtubeVideoId && (
  
  Video Example:
  
  
  
  
  )}
  
  

Вот ошибка, которую я получаю:

react-dom_client.js?v=f1a2239a:16716 Uncaught TypeError: невозможно прочитать
свойства неопределенного значения (чтение «videoPlayer») в
VideoPlayer.tsx:11:31 (анонимно) @ VideoPlayer.tsx:11

Я не уверен, почему возникла ошибка.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ct-web-app