一个页面多个video同时播放视频

最近做了个项目,要求React + TypeScript用video同时播放多个视频

现在能做到播放一个视频,写多个标签只有最后一个可以用,大佬们帮忙看看是什么情况

这是完整的代码,下面是效果

现在只有一个video好用,其他的不好用,请问是什么情况

用多个实例播放

import React, { useMemo, useState, useEffect } from 'react';
import videojs from 'video.js';

// //样式文件注意要加上
import 'video.js/dist/video-js.css';

const Player: React.FC<any> = (props) => {

  const [videoNode, setVideoNode] = useState<any>();
  const [player, setPlayer] = useState<any>();

  const url = 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4';
  // const url = 'https://mediaservices20210527.blob.core.windows.net/source/test.mp4';

  // rtmp播放
  useMemo(() => {
    if (videoNode) {
      const videoJsOptions = {
        autoplay: true, // 自动播放
        language: 'zh-CN',
        preload: 'auto', // 自动加载
        // errorDisplay: true, // 错误展示
        // controls: true,// 进图条(组件自带的)
        width: 500, // 宽
        height: 300,
        flash: {
          swf: '/video-js.swf'
        },
        sources: [
          {
            src: url
            // type: 'rtmp/flv', // 类型可加可不加，目前未看到影响
          }
        ]
      };
      const videoPlayer = videojs(videoNode, videoJsOptions);
      setPlayer(videoPlayer);
      console.log(setPlayer);
      console.log(videoJsOptions);
    }
  }, [videoNode]);

  useEffect(() => {
    return (() => {
      if (player) player.dispose();
    });
  }, []);

  return (
    <>
      <div style={{ margin: 50 }}>
        <p>播放器</p>
        <ul>
          <li>
            <video
              ref={(node) => {
                setVideoNode(node);
              }}
              id="videoPlay"
              className="video-js vjs-default-skin vjs-big-play-centered"
              width="100%"
              height="100%"
            >
              <track kind="captions"/>
              <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
            </video>
          </li>
          <li>
            <video
              ref={(node) => {
                setVideoNode(node);
              }}
              id="videoPlay"
              className="video-js vjs-default-skin vjs-big-play-centered"
              width="100%"
              height="100%"
            >
              <track kind="captions"/>
              <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
            </video>
          </li>
        </ul>
      </div>

    </>
  );
};

export default Player;