React应用中Plyr等多视频播放器尺寸一致性问题咨询

问题背景 #

在React应用中集成了Plyr、Video.js和自定义视频播放器，目标是让三者保持一致的尺寸和宽高比。通过CSS和播放器选项设置后，Video.js和自定义播放器表现正常，但Plyr未遵循指定的尺寸规则，尺寸表现不一致。

相关代码 #

index.js #

useEffect(() => {
  if (videoRef.current) {
    if (isCustomPlayer) {
      // Custom player initialization
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
      videoRef.current.addEventListener('timeupdate', handleTimeUpdate);
      videoRef.current.src = videoData?.video_link || '';
      const currentTime = videoRef.current.currentTime;
      setCurrentTime(currentTime);
    } else if (isPlyrPlayer) {
      // Initialize Plyr
      if (!playerRef.current) {
        playerRef.current = new Plyr(videoRef.current, {
          controls: [
        'play-large', 'restart', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'  
      ],
        });
        playerRef.current.source = {
          type: 'video',
          sources: [
            {
              src: videoData?.video_link,
              type: 'video/mp4',
            },
          ],
        };
        playerRef.current.on('timeupdate', () => {
          const currentTime = playerRef.current.currentTime;
          setCurrentTime(currentTime);
        });
      }
    } else {
      // Video.js player initialization
      if (!playerRef.current) {
        playerRef.current = videojs(videoRef.current, {
          controls: true,
          autoplay: false,
          preload: 'auto',
          sources: [
            {
              src: videoData?.video_link,
              type: 'video/mp4',
            },
          ],
        });
        playerRef.current.on('timeupdate', () => {
          const currentTime = playerRef.current.currentTime();
          setCurrentTime(currentTime);
        });
      }
    }
  }

  return () => {
    if (videoRef.current) {
      videoRef.current.removeEventListener('timeupdate', handleTimeUpdate);
    }
    if (playerRef.current) {
      playerRef.current.destroy ? playerRef.current.destroy() : playerRef.current.dispose();
      playerRef.current = null;
    }
  };
}, [isCustomPlayer, isPlyrPlayer, videoData]);

{isCustomPlayer ? (
              <div key="custom-player">
                <video
                  id="video-player"
                  className={isShortVideo ? 'short-video-container' : 'video-container'}
                  ref={videoRef}
                  controls
                  controlslist="nodownload"
                  disablePictureInPicture
                ></video>
              </div>
            ) : isPlyrPlayer ? (
              <div key="plyr-player">
                <video
                  id="video-player"
                  ref={videoRef}
                  className={`plyr-container ${isShortVideo ? 'short-video-container' : 'video-container'}`}
                  controls
                ></video>
              </div>
            ) : (
              <div key="video-js-player">
                <video
                  id="video-player"
                  ref={videoRef}
                  className={`video-js vjs-default-skin vjs-big-play-centered ${isShortVideo ? 'short-video-container' : 'video-container'}`}
                  controls
                ></video>
              </div>
            )}

styles.css #

.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.video-js .vjs-tech {
    object-fit: contain;
    /* Preserves aspect ratio, but might keep black bars */
}


.plyr-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.plyr-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

遇到的问题 #

• Plyr播放器未遵循CSS中定义的宽高比设置
• 与Video.js和自定义播放器相比，Plyr播放器尺寸表现不一致

咨询问题 #

• 如何确保Plyr播放器与应用中其他播放器保持相同的尺寸和宽高比？
• 是否有更有效的方法在不干扰Plyr原生视频缩放处理的前提下，为其应用CSS规则？

解决方案 #

1. 修正Plyr容器结构与CSS规则 #

Plyr初始化后会生成自己的DOM结构（外层包裹.plyr元素），直接给原生video标签加尺寸规则无效，必须将尺寸规则作用于Plyr的外层父容器：

步骤1：修改JSX结构

给Plyr单独设置外层容器，不要把尺寸类直接加在video标签上：

// 替换原Plyr对应的JSX
<div key="plyr-player" className={`plyr-wrapper ${isShortVideo ? 'short-video-container' : 'video-container'}`}>
  <video
    id="video-player"
    ref={videoRef}
    controls
  ></video>
</div>

步骤2：更新CSS规则

统一三个播放器的基础尺寸，同时针对Plyr的自动生成容器设置占满规则：

/* 通用容器规则，统一所有播放器的基础尺寸 */
.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.short-video-container {
    aspect-ratio: 9 / 16; /* 短视频对应的宽高比 */
}

/* Plyr专属规则 */
.plyr-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: inherit; /* 继承父容器的宽高比 */
}

.plyr-wrapper .plyr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 保留原Video.js规则 */
.video-js .vjs-tech {
    object-fit: contain;
}

2. 禁用Plyr原生尺寸控制（可选） #

如果Plyr默认尺寸逻辑仍有干扰，初始化时关闭自动尺寸调整：

playerRef.current = new Plyr(videoRef.current, {
  controls: [
    'play-large', 'restart', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'  
  ],
  autoSize: false, // 禁用自动尺寸计算，完全交给CSS控制
});

3. 确保播放器切换时的实例清理 #

切换播放器时，确保Plyr实例完全销毁，避免DOM残留影响尺寸：

return () => {
  if (videoRef.current) {
    videoRef.current.removeEventListener('timeupdate', handleTimeUpdate);
  }
  if (playerRef.current) {
    // 针对Plyr实例调用专属destroy方法
    if (playerRef.current instanceof Plyr) {
      playerRef.current.destroy();
    } else {
      playerRef.current.destroy ? playerRef.current.destroy() : playerRef.current.dispose();
    }
    playerRef.current = null;
  }
};

关键原理 #

Plyr会将原生video标签包裹在自身的.plyr容器中，因此必须通过外层父容器控制整体尺寸，再让.plyr元素占满父容器空间。使用aspect-ratio属性可以统一所有播放器的宽高比，替代传统的padding-top百分比方法，更简洁直观。

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