Reactjs视频未播放时移动端无缩略图预览、网页端正常问题求助

移动端浏览器出于节省用户流量的默认策略，未启动播放时不会主动加载视频内容生成预览帧，桌面端默认预加载策略会加载部分视频片段所以可以正常显示缩略图。

可行解决方案 #

• 方案1：手动指定poster属性（最推荐，全端兼容）
  给<video>标签添加poster属性，属性值为你提前截取的视频缩略图资源地址，修改后代码示例如下：

<Video>
  <video 
    playsInline 
    controls 
    width="300" 
    height="300"
    poster="/你的缩略图地址.jpg"
  >
    <source
      src="4.mp4"
      type="video/mp4"
    />
    Sorry, your browser doesn't support embedded videos.
  </video>
</Video>

• 方案2：动态截取视频首帧作为缩略图
  如果不想提前准备静态缩略图，可以在页面加载时用canvas截取视频第一帧自动生成缩略图，React中实现示例：

import { useRef, useEffect } from 'react';

const VideoComponent = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    const canvas = canvasRef.current;
    if (!video || !canvas) return;

    video.addEventListener('loadeddata', () => {
      const ctx = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 将canvas内容转为图片地址赋值给poster
      video.poster = canvas.toDataURL('image/jpeg');
    });
  }, []);

  return (
    <Video>
      <canvas ref={canvasRef} style={{display: 'none'}} />
      <video 
        ref={videoRef}
        playsInline 
        controls 
        width="300" 
        height="300"
        preload="metadata"
      >
        <source src="4.mp4" type="video/mp4" />
        Sorry, your browser doesn't support embedded videos.
      </video>
    </Video>
  )
}

• 方案3：调整preload属性尝试
  可尝试给<video>标签添加preload="auto"属性，部分移动端浏览器会在该配置下预加载视频元数据生成缩略图，但该方案受用户浏览器流量设置影响，兼容性低于前两种方案。
  如果使用的是第三方视频组件，可检查组件文档确认是否有封装缩略图相关配置项，避免内部属性覆盖原生video的配置。

问题相关截图 #

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