如何在 React 应用程序中保持多个视频播放器的大小一致

Question

我正在将多个视频播放器（Plyr、Video.js 和专有播放器）集成到我的 React 应用程序中，并且面临着在所有播放器之间保持一致的尺寸和宽高比的问题。尽管通过 CSS 和播放器选项设置宽度和纵横比，但 Plyr 并不遵守指定的尺寸。其余 2 名玩家工作正常，符合预期。

这是我的 CSS 和 JavaScript 设置的相关部分：

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>
            )}

样式.css

    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 规则而不干扰其对视频缩放的本机处理？

任何关于在 React 环境中实现一致的玩家规模的见解或建议都将受到高度赞赏。

Answer 1

Plyr 可能会覆盖某些 CSS 属性，这就是您的设置无法按预期工作的原因。

修复 Plyr 的纵横比 plyr 创建额外的包装元素，这些元素可能会干扰对视频元素的直接 CSS 控制。为了确保宽高比按预期工作，您需要控制包装元素和视频元素 insdie。

我会给你Playr更新的CSS

/* Wrapper for the Plyr player */
.plyr-container {
    position: relative;
    width: 100%; /* Ensures it fills the parent container */
    padding-top: 56.25%; /* Aspect ratio: 16:9 (9 / 16 = 0.5625) */
    height: 0; /* Important for aspect ratio handling */
    overflow: hidden; /* Prevents content overflow */
}

/* Ensures the video element respects the parent container's dimensions */
.plyr-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* This will maintain aspect ratio and fit within the bounds */
}

加强所有玩家的一致性因此，您希望确保 Plyr、Video.js 和您的专有播放器表现一致。

/* 所有视频容器的共享样式 / .video-container、.short-video-container、.plyr-container { 位置：相对；宽度：100%；顶部填充：56.25%； / 对于 16:9 宽高比 */ 高度：0；溢出：隐藏； }

/* 应用于 video.js 播放器 */ .video-js { 位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；对象适合：包含； }

/* 应用于自定义播放器视频和Plyr */ .video-容器视频， .plyr-容器视频， .short-video-container 视频 { 位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；对象适合：包含； }

调整 Plyr 播放器的 JavaScript 在某些情况下，Plyr 可能会因其自身的设置而干扰 CSS 大小调整。您可以在初始化播放器时禁用某些本机行为或在 Plyr 选项中设置宽高比。

所以像这样改变index.js

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'
        ],
        ratio: '16:9', // Enforces the 16:9 aspect ratio in Plyr settings
        fullscreen: {
            enabled: true, // Ensures proper scaling in fullscreen mode
            fallback: true,
            iosNative: true
        }
    });

    playerRef.current.source = {
        type: 'video',
        sources: [
            {
                src: videoData?.video_link,
                type: 'video/mp4',
            }
        ]
    };
    playerRef.current.on('timeupdate', () => {
        const currentTime = playerRef.current.currentTime;
        setCurrentTime(currentTime);
    });
}

如何在 React 应用程序中保持多个视频播放器的大小一致

问题描述投票：0回答：1

1个回答

最新问题

如何在 React 应用程序中保持多个视频播放器的大小一致

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1