mfyx_web/src/Activity/ActivityVideo.tsx

import React, { useRef, useEffect } from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { useLogin2p } from 'Login2p/Login2pContext'
import { MicroRoadshowService } from 'Material/MicroRoadshow.service'
import styles from './css/ActivityVideo.module.scss'

export interface IActivityVideo {
  VideoDetail?: any // 视频ID
}
/**活动类型列表 */
const ActivityVideo: React.FC<IActivityVideo> = props => {
  const { VideoDetail } = props

  const videoRef = useRef<HTMLVideoElement>(null)

  // 视频播放记录
  const { run: applyVideoHistory } = useRequest(MicroRoadshowService.postVideoHistory, {
    manual: true
  })

  const handleOnplay = () => {
    videoRef.current &&
      parseInt(videoRef.current.currentTime.toString()) === 0 &&
      applyVideoHistory(
        VideoDetail?.ActivityId || VideoDetail?.Id,
        VideoDetail?.Type,
        sessionStorage.getItem('invite_code') || ''
      )
  }
  return (
    <div className={styles['activity-video-page']}>
      <video
        ref={videoRef}
        src={VideoDetail?.ResourceUrl}
        className="video-content"
        controls={true}
        controlsList="nodownload"
        loop={true}
        preload="auto"
        onContextMenu={e => {
          e.preventDefault()
          return false
        }}
        onPlay={handleOnplay}
      >
        <p> 当前浏览器不支持video标签 </p>
      </video>
    </div>
  )
}

export default ActivityVideo