点击父级块元素控制子video元素实现全屏播放的实现方法

你可以通过两种方式实现需求，具体如下：

方案一：通过事件对象直接查找对应video（改动最小） #

不需要修改现有渲染逻辑，只需要实现onVideo方法即可，代码如下：

const onVideo = (e) => {
  // currentTarget固定为绑定点击事件的父div，不受点击内部子元素影响
  const videoElement = e.currentTarget.querySelector('video')
  if (!videoElement) return

  // 触发视频播放，捕获异常避免控制台报错
  videoElement.play().catch(err => console.log('视频播放失败：', err))

  // 兼容多浏览器的全屏调用
  const fullScreenMethod = videoElement.requestFullscreen 
    || videoElement.webkitRequestFullscreen 
    || videoElement.mozRequestFullScreen 
    || videoElement.msRequestFullscreen
  fullScreenMethod && fullScreenMethod.call(videoElement)
}

方案二：通过ref绑定video元素（更稳定可控） #

如果后续还需要对video做其他操作（比如暂停、进度控制等），推荐用ref绑定的方式，步骤如下：

1. 组件内创建ref存储所有video实例

import { useRef } from 'react'

// 组件内部声明
const videoRefs = useRef([])

2. 修改渲染逻辑，给每个video绑定对应ref，点击事件传入当前索引

!!post &&  post.map((item, index) =>
    <div key={item.id} onClick={()=>onVideo(index)}>
        <video 
          ref={el => videoRefs.current[index] = el}
          width="310.44" 
          height="458" 
          style={{objectFit: 'cover'}} 
          controls={false}
        >
            <source src={item.url} type="video/mp4" />
        </video>
        <div>
            <div style={{fontSize: '16px'}}>{item.date}</div>
            <div style={{fontFamily: 'Roboto-Bold',fontSize: '22px'}}>{item.name}</div>
        </div>
    </div>)

3. 实现onVideo方法

const onVideo = (index) => {
  const videoElement = videoRefs.current[index]
  if (!videoElement) return

  videoElement.play().catch(err => console.log('视频播放失败：', err))

  const fullScreenMethod = videoElement.requestFullscreen 
    || videoElement.webkitRequestFullscreen 
    || videoElement.mozRequestFullScreen 
    || videoElement.msRequestFullscreen
  fullScreenMethod && fullScreenMethod.call(videoElement)
}

注意事项 #

• 视频播放和全屏请求都必须在用户交互事件的同步回调中执行，否则会被浏览器安全策略拦截
• 部分移动端浏览器对自动播放限制较严格，以上实现基于用户点击触发，符合浏览器要求不会被拦截
• 如果需要在退出全屏时暂停视频，可以监听fullscreenchange事件做对应处理

内容的提问来源于stack exchange，提问作者config314