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&nbsp; &nbsp; video={videoURL}&nbsp; &nbsp; autoplay={false}&nbsp; &nbsp; controls={true}&nbsp; &nbsp; responsive={true}&nbsp; &nbsp; onEnd={() => { onVideoEnd() }}&nbsp; &nbsp; style={{ justifyContent: 'center'}}&nbsp; &nbsp; start={0}&nbsp; &nbsp; onTimeUpdate={(duration) => { console.log(duration }} />

Answer 2

如果您遇到类似问题，请查看更新的 @vimeo/player 文档： https: //www.npmjs.com/package/@vimeo/player#getfullscreen-promiseboolean-error我更新和测试的代码如下所示：import React, {&nbsp; useEffect, useContext, useState, useRef,} from 'react';import PropTypes from 'prop-types';import Player from '@vimeo/player';import { BrowserContext } from '../../contexts/BrowserContext';const TAG = 'player';/**&nbsp;* remove event listeners&nbsp;* @param {object} player&nbsp;*/function removeEventListeners(player) {&nbsp; if (!player) return;&nbsp; player.off('ended');&nbsp; player.off('pause');&nbsp; player.off('play');}/**&nbsp;* remove interval&nbsp;* @param {number} interval&nbsp;*/function removeInterval(interval) {&nbsp; console.tag(TAG).debug('removeInterval called');&nbsp; window.clearInterval(interval);}/**&nbsp;* 640×480, 800×600, 960×720, 1024×768, 1280×960,&nbsp;* 1400×1050, 1440×1080 , 1600×1200, 1856×1392, 1920×1440, and 2048×1536&nbsp;* @param {number} width&nbsp;*/function computeRatio(delayedWidth, percentage = 0.9) {&nbsp; const height = window.innerHeight;&nbsp; const width = delayedWidth - (delayedWidth * (1 - percentage));&nbsp; if (height <= 480) {&nbsp; &nbsp; return width > 640 ? 640 : width;&nbsp; }&nbsp; if (height <= 600) {&nbsp; &nbsp; return width > 800 ? 800 : width;&nbsp; }&nbsp; if (height <= 720) {&nbsp; &nbsp; return width > 960 ? 960 : width;&nbsp; }&nbsp; if (height <= 768) {&nbsp; &nbsp; return width > 1024 ? 1024 : width;&nbsp; }&nbsp; if (height <= 960) {&nbsp; &nbsp; return width > 1280 ? 1280 : width;&nbsp; }&nbsp; if (height <= 1050) {&nbsp; &nbsp; return width > 1400 ? 1400 : width;&nbsp; }&nbsp; if (height <= 1080) {&nbsp; &nbsp; return width > 1440 ? 1440 : width;&nbsp; }&nbsp; if (height <= 1200) {&nbsp; &nbsp; return width > 1600 ? 1600 : width;&nbsp; }&nbsp; if (height <= 1392) {&nbsp; &nbsp; return width > 1856 ? 1856 : width;&nbsp; }&nbsp; if (height <= 1440) {&nbsp; &nbsp; return width > 1920 ? 1920 : width;&nbsp; }&nbsp; if (height <= 1536) {&nbsp; &nbsp; return width > 2048 ? 2048 : width;&nbsp; }&nbsp; return width;}const VideoPlayer = ({&nbsp; index, link, onProgress, latestProgress, widthPercentage, onVideoEnded,}) => {&nbsp; const { delayedWidth } = useContext(BrowserContext);&nbsp; const [progress, setProgress] = useState(latestProgress < 1 ? latestProgress : 0);&nbsp; const playerRef = useRef(null);&nbsp; const intervalRef = useRef(null);&nbsp; useEffect(() => {&nbsp; &nbsp; console.tag(TAG).debug('changing delayed width', delayedWidth);&nbsp; &nbsp; const asyncEffect = async () => {&nbsp; &nbsp; &nbsp; const player = playerRef.current;&nbsp; &nbsp; &nbsp; if (player) {&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug('player detected, checking fullscreen');&nbsp; &nbsp; &nbsp; &nbsp; const isFullscreen = await player.getFullscreen();&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug('fullscreen detected', isFullscreen);&nbsp; &nbsp; &nbsp; &nbsp; if (isFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; removeEventListeners(player);&nbsp; &nbsp; &nbsp; &nbsp; playerRef.current = null;&nbsp; &nbsp; &nbsp; &nbsp; player.pause(); // gets rid of interval&nbsp; &nbsp; &nbsp; &nbsp; player.destroy();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; const options = { id: link, width: computeRatio(delayedWidth, widthPercentage) };&nbsp; &nbsp; &nbsp; const newPlayer = new Player(`frame-${index}`, options);&nbsp; &nbsp; &nbsp; playerRef.current = newPlayer;&nbsp; &nbsp; &nbsp; if (progress) {&nbsp; &nbsp; &nbsp; &nbsp; newPlayer.getDuration().then((duration) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const seconds = duration * progress;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newPlayer.setCurrentTime(seconds);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; const keepTrackProgress = async () => {&nbsp; &nbsp; &nbsp; &nbsp; // gets duration of video in seconds&nbsp; &nbsp; &nbsp; &nbsp; const duration = await newPlayer.getDuration();&nbsp; &nbsp; &nbsp; &nbsp; intervalRef.current = window.setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const currentPlayer = playerRef.current;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!currentPlayer) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentPlayer.getCurrentTime().then((seconds) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // `seconds` indicates the current playback position of the video&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newProgress = seconds / duration;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug(`progress: ${newProgress}, duration ${duration}, seconds ${seconds}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onProgress(newProgress);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setProgress(newProgress);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // track every next 10 seconds of progress&nbsp; &nbsp; &nbsp; &nbsp; }, 10000);&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; newPlayer.on('ended', () => {&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug('player onEnded');&nbsp; &nbsp; &nbsp; &nbsp; removeInterval(intervalRef.current);&nbsp; &nbsp; &nbsp; &nbsp; intervalRef.current = null;&nbsp; &nbsp; &nbsp; &nbsp; onProgress(1);&nbsp; &nbsp; &nbsp; &nbsp; setProgress(1);&nbsp; &nbsp; &nbsp; &nbsp; onVideoEnded();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; newPlayer.on('pause', ({ duration, seconds }) => {&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug('player onPause');&nbsp; &nbsp; &nbsp; &nbsp; removeInterval(intervalRef.current);&nbsp; &nbsp; &nbsp; &nbsp; intervalRef.current = null;&nbsp; &nbsp; &nbsp; &nbsp; const newProgress = seconds / duration;&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug(`progress at paused: ${newProgress}, duration ${duration}, seconds ${seconds}`);&nbsp; &nbsp; &nbsp; &nbsp; onProgress(newProgress);&nbsp; &nbsp; &nbsp; &nbsp; setProgress(newProgress);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; newPlayer.on('play', () => {&nbsp; &nbsp; &nbsp; &nbsp; console.tag(TAG).debug('player onPlay');&nbsp; &nbsp; &nbsp; &nbsp; keepTrackProgress();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; asyncEffect();&nbsp; }, [delayedWidth]);&nbsp; useEffect(() => () => {&nbsp; &nbsp; removeInterval(intervalRef.current);&nbsp; &nbsp; removeEventListeners(playerRef.current);&nbsp; &nbsp; if (playerRef.current) {&nbsp; &nbsp; &nbsp; playerRef.current.destroy();&nbsp; &nbsp; }&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div id={`frame-${index}`} className="frame-wrapper" />&nbsp; );};VideoPlayer.propTypes = {&nbsp; index: PropTypes.number.isRequired,&nbsp; link: PropTypes.string.isRequired,&nbsp; onProgress: PropTypes.func.isRequired,&nbsp; onVideoEnded: PropTypes.func,&nbsp; latestProgress: PropTypes.number.isRequired,&nbsp; widthPercentage: PropTypes.number,};VideoPlayer.defaultProps = {&nbsp; widthPercentage: 0.9,&nbsp; onVideoEnded: () => {},};export default VideoPlayer;