index.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2025-03-28 11:18:55
 */
import React, { useState, useEffect, useRef } from 'react';
import { Modal } from 'antd';

import classNames from 'classnames';
import styles from './index.less';
const videoUrl = 'https://g.civnet.cn:8000/video/companyIntroduction.mp4';
const IframeContainer = props => {
  const { loading, isVideoModal, setIsVideoModal } = props;
  const videoRef = useRef(null);

  const width = 1400;

  useEffect(() => {
    if (videoRef.current) {
      if (isVideoModal) {
        videoRef.current.paused && videoRef.current.play();
      } else {
        !videoRef.current.paused && videoRef.current.pause();
      }
    }
  }, [isVideoModal]);
  return (
    <>
      <Modal
        style={{ top: '60px' }}
        wrapClassName={classNames(styles.videoModal, 'demonstration_video_modal')}
        title={null}
        visible={isVideoModal}
        open={isVideoModal}
        footer={null}
        width={width}
        onCancel={() => {
          setIsVideoModal(false);
        }}
      >
        <video ref={videoRef} width={width} autoPlay="autoPlay" muted controls src={videoUrl} loop />
      </Modal>
    </>
  );
};

export default IframeContainer;