admin/src/pages/home/components/VideoPlay.jsx

import { Row, Col, Card, Statistic, Carousel } from "antd";
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  LikeOutlined,
} from "@ant-design/icons";
import React, { useState } from "react";

import { useRef } from "react";
import { useEffect } from "react";

// https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%AE%A0%E7%89%A9%E5%9B%BE%E7%89%87&fr=albumslist&album_tab=%E5%8A%A8%E7%89%A9&album_id=688&rn=30

// https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&fr=searchindex_album%20&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&rn=30
const VideoPlay = (props) => {
  const { url, index, current, isVideoPlayRef, style } = props;

  const ref = useRef();

  useEffect(() => {
    if (current == index) {
      ref.current
        ?.play()
        .then((res) => {
          isVideoPlayRef.current = true;
        })
        .catch((err) => {
          console.log(err)
          isVideoPlayRef.current = false;
        });
    } else {
      ref.current.pause();
      isVideoPlayRef.current = false;
    }
  }, [current, index]);

  useEffect(() => {}, []);

  return (
    <video
      ref={ref}
      autoPlay={false}
      src={url}
      controls="controls"
      onEnded={() => {
        isVideoPlayRef.current = false;
      }}
      style={style}
    ></video>
  );
};
export default VideoPlay;