Vimeo，检测全屏以阻止获取新播放器（动态宽度变化）

Question

我想动态更改 vimeo 播放器的宽度以适应窗口宽度。您可以在问题末尾看到组件的完整代码，也许已经有一种更简单的方法来动态更改播放器的宽度，所以我根本不必处理这些问题（提供的响应选项） by vimeo 对我不起作用）。我当前解决方案遇到的问题：如果播放器进入全屏或在全屏上旋转手机，我不想触发更改，因为 vimeo 已经自动处理这些更改，但我很难检测播放器是否在全屏显示。    const isFullscreen = (document.fullscreenElement       || document.webkitFullscreenElement       || document.mozFullScreenElement       || document.msFullscreenElement       || playerWidth === delayedWidth)此解决方案不适用于 iphone 11 pro 以及可能所有 Safari 浏览器，因为全屏功能并未完全实现。

Answer 1

我正在使用 u-wave vimeo 播放器，其中响应已得到照顾。

import Vimeo from '@u-wave/react-vimeo';`

<Vimeo

    video={videoURL}

    autoplay={false}

    controls={true}

    responsive={true}

    onEnd={() => { onVideoEnd() }}

    style={{ justifyContent: 'center'}}

    start={0}

    onTimeUpdate={(duration) => { console.log(duration }} />

Answer 2

如果您遇到类似问题，请查看更新的 @vimeo/player 文档： https: //www.npmjs.com/package/@vimeo/player#getfullscreen-promiseboolean-error

我更新和测试的代码如下所示：

import React, {

  useEffect, useContext, useState, useRef,

} from 'react';

import PropTypes from 'prop-types';

import Player from '@vimeo/player';

import { BrowserContext } from '../../contexts/BrowserContext';

const TAG = 'player';

/**

 * remove event listeners

 * @param {object} player

 */

function removeEventListeners(player) {

  if (!player) return;

  player.off('ended');

  player.off('pause');

  player.off('play');

}

/**

 * remove interval

 * @param {number} interval

 */

function removeInterval(interval) {

  console.tag(TAG).debug('removeInterval called');

  window.clearInterval(interval);

}

/**

 * 640×480, 800×600, 960×720, 1024×768, 1280×960,

 * 1400×1050, 1440×1080 , 1600×1200, 1856×1392, 1920×1440, and 2048×1536

 * @param {number} width

 */

function computeRatio(delayedWidth, percentage = 0.9) {

  const height = window.innerHeight;

  const width = delayedWidth - (delayedWidth * (1 - percentage));

  if (height <= 480) {

    return width > 640 ? 640 : width;

  }

  if (height <= 600) {

    return width > 800 ? 800 : width;

  }

  if (height <= 720) {

    return width > 960 ? 960 : width;

  }

  if (height <= 768) {

    return width > 1024 ? 1024 : width;

  }

  if (height <= 960) {

    return width > 1280 ? 1280 : width;

  }

  if (height <= 1050) {

    return width > 1400 ? 1400 : width;

  }

  if (height <= 1080) {

    return width > 1440 ? 1440 : width;

  }

  if (height <= 1200) {

    return width > 1600 ? 1600 : width;

  }

  if (height <= 1392) {

    return width > 1856 ? 1856 : width;

  }

  if (height <= 1440) {

    return width > 1920 ? 1920 : width;

  }

  if (height <= 1536) {

    return width > 2048 ? 2048 : width;

  }

  return width;

}

const VideoPlayer = ({

  index, link, onProgress, latestProgress, widthPercentage, onVideoEnded,

}) => {

  const { delayedWidth } = useContext(BrowserContext);

  const [progress, setProgress] = useState(latestProgress < 1 ? latestProgress : 0);

  const playerRef = useRef(null);

  const intervalRef = useRef(null);

  useEffect(() => {

    console.tag(TAG).debug('changing delayed width', delayedWidth);

    const asyncEffect = async () => {

      const player = playerRef.current;

      if (player) {

        console.tag(TAG).debug('player detected, checking fullscreen');

        const isFullscreen = await player.getFullscreen();

        console.tag(TAG).debug('fullscreen detected', isFullscreen);

        if (isFullscreen) {

          return;

        }

        removeEventListeners(player);

        playerRef.current = null;

        player.pause(); // gets rid of interval

        player.destroy();

      }

      const options = { id: link, width: computeRatio(delayedWidth, widthPercentage) };

      const newPlayer = new Player(`frame-${index}`, options);

      playerRef.current = newPlayer;

      if (progress) {

        newPlayer.getDuration().then((duration) => {

          const seconds = duration * progress;

          newPlayer.setCurrentTime(seconds);

        });

      }

      const keepTrackProgress = async () => {

        // gets duration of video in seconds

        const duration = await newPlayer.getDuration();

        intervalRef.current = window.setInterval(() => {

          const currentPlayer = playerRef.current;

          if (!currentPlayer) {

            return;

          }

          currentPlayer.getCurrentTime().then((seconds) => {

            // `seconds` indicates the current playback position of the video

            const newProgress = seconds / duration;

            console.tag(TAG).debug(`progress: ${newProgress}, duration ${duration}, seconds ${seconds}`);

            onProgress(newProgress);

            setProgress(newProgress);

          });

          // track every next 10 seconds of progress

        }, 10000);

      };

      newPlayer.on('ended', () => {

        console.tag(TAG).debug('player onEnded');

        removeInterval(intervalRef.current);

        intervalRef.current = null;

        onProgress(1);

        setProgress(1);

        onVideoEnded();

      });

      newPlayer.on('pause', ({ duration, seconds }) => {

        console.tag(TAG).debug('player onPause');

        removeInterval(intervalRef.current);

        intervalRef.current = null;

        const newProgress = seconds / duration;

        console.tag(TAG).debug(`progress at paused: ${newProgress}, duration ${duration}, seconds ${seconds}`);

        onProgress(newProgress);

        setProgress(newProgress);

      });

      newPlayer.on('play', () => {

        console.tag(TAG).debug('player onPlay');

        keepTrackProgress();

      });

    };

    asyncEffect();

  }, [delayedWidth]);

  useEffect(() => () => {

    removeInterval(intervalRef.current);

    removeEventListeners(playerRef.current);

    if (playerRef.current) {

      playerRef.current.destroy();

    }

  }, []);

  return (

    <div id={`frame-${index}`} className="frame-wrapper" />

  );

};

VideoPlayer.propTypes = {

  index: PropTypes.number.isRequired,

  link: PropTypes.string.isRequired,

  onProgress: PropTypes.func.isRequired,

  onVideoEnded: PropTypes.func,

  latestProgress: PropTypes.number.isRequired,

  widthPercentage: PropTypes.number,

};

VideoPlayer.defaultProps = {

  widthPercentage: 0.9,

  onVideoEnded: () => {},

};

export default VideoPlayer;