Npmlibrary

Fullscreen

预计阅读时间: 4 分钟

Fullscreen 功能提供对 Video.js 播放器全屏模式的完整管理，包括状态访问和全屏切换操作。

概述

Fullscreen 功能是 Video.js React 中用于管理播放器全屏状态的模块。它提供全屏状态信息和切换操作，支持全屏请求、退出和切换。

状态

属性	类型	描述
`fullscreen`	`boolean`	当前是否处于全屏模式
`fullscreenAvailability`	`boolean`	全屏功能是否可用

状态说明

fullscreen：当播放器处于全屏模式时为 true，否则为 false
fullscreenAvailability：浏览器是否支持全屏功能，某些环境可能不支持

操作

操作	类型	描述
`requestFullscreen`	`Action`	请求进入全屏模式
`exitFullscreen`	`Action`	退出全屏模式
`toggleFullscreen`	`Action`	切换全屏模式

requestFullscreen

请求进入全屏模式。如果当前已在全屏模式，则无效。

import { usePlayerActions, usePlayer } from '@videojs/react';
import { selectFullscreen } from '@videojs/react';

function FullscreenButton() {
  const fullscreen = usePlayer(selectFullscreen);
  const { requestFullscreen } = usePlayerActions();
  
  return (
    <button 
      onClick={requestFullscreen}
      disabled={!fullscreen.fullscreenAvailability}
    >
      全屏
    </button>
  );
}

exitFullscreen

退出当前全屏模式。如果当前不在全屏模式，则无效。

import { usePlayerActions, usePlayer } from '@videojs/react';
import { selectFullscreen } from '@videojs/react';

function ExitFullscreenButton() {
  const fullscreen = usePlayer(selectFullscreen);
  const { exitFullscreen } = usePlayerActions();
  
  return (
    <button 
      onClick={exitFullscreen}
      disabled={!fullscreen.fullscreen}
    >
      退出全屏
    </button>
  );
}

toggleFullscreen

切换全屏模式。根据当前状态进入或退出全屏。

import { usePlayerActions, usePlayer } from '@videojs/react';
import { selectFullscreen } from '@videojs/react';

function ToggleFullscreenButton() {
  const fullscreen = usePlayer(selectFullscreen);
  const { toggleFullscreen } = usePlayerActions();
  
  return (
    <button onClick={toggleFullscreen}>
      {fullscreen.fullscreen ? '退出全屏' : '进入全屏'}
    </button>
  );
}

选择器

传递 selectFullscreen 到 usePlayer 钩子以订阅全屏状态。

import { selectFullscreen, usePlayer } from '@videojs/react';

function FullscreenStatus() {
  const fullscreen = usePlayer(selectFullscreen);
  
  return (
    <div>
      <p>全屏状态: {fullscreen.fullscreen ? '全屏' : '普通'}</p>
      <p>全屏可用: {fullscreen.fullscreenAvailability ? '是' : '否'}</p>
    </div>
  );
}

示例

完整的全屏控制组件

import { selectFullscreen, usePlayer, usePlayerActions } from '@videojs/react';

function FullscreenControls() {
  const fullscreen = usePlayer(selectFullscreen);
  const { requestFullscreen, exitFullscreen, toggleFullscreen } = usePlayerActions();
  
  if (!fullscreen.fullscreenAvailability) {
    return <div>您的浏览器不支持全屏功能</div>;
  }
  
  return (
    <div className="fullscreen-controls">
      {!fullscreen.fullscreen ? (
        <button onClick={requestFullscreen}>全屏播放</button>
      ) : (
        <button onClick={exitFullscreen}>退出全屏</button>
      )}
    </div>
  );
}

全屏时调整UI

import { selectFullscreen, selectControls, usePlayer } from '@videojs/react';

function AdaptiveUI() {
  const fullscreen = usePlayer(selectFullscreen);
  const controls = usePlayer(selectControls);
  
  return (
    <div className={`video-container ${fullscreen.fullscreen ? 'fullscreen-mode' : 'normal-mode'}`}>
      {/* 视频内容 */}
      
      {/* 全屏时显示额外的控制按钮 */}
      {fullscreen.fullscreen && (
        <div className="fullscreen-toolbar">
          <button>设置</button>
          <button>画质</button>
        </div>
      )}
    </div>
  );
}

全屏状态监听

import { selectFullscreen, usePlayer, usePlayerActions } from '@videojs/react';
import { useEffect } from 'react';

function FullscreenListener() {
  const fullscreen = usePlayer(selectFullscreen);
  const { toggleFullscreen } = usePlayerActions();
  
  useEffect(() => {
    if (fullscreen.fullscreen) {
      console.log('已进入全屏模式');
      // 添加全屏模式特有的处理
      document.body.style.overflow = 'hidden';
    } else {
      console.log('已退出全屏模式');
      // 恢复正常状态
      document.body.style.overflow = '';
    }
    
    return () => {
      document.body.style.overflow = '';
    };
  }, [fullscreen.fullscreen]);
  
  // 按 ESC 键退出全屏
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && fullscreen.fullscreen) {
        toggleFullscreen();
      }
    };
    
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [fullscreen.fullscreen, toggleFullscreen]);
  
  return null;
}

注意事项

浏览器支持：全屏功能可能因浏览器或设备而异
用户手势：某些浏览器可能需要用户手势才能触发全屏
全屏 API：使用浏览器原生 Fullscreen API
iframe 限制：在 iframe 中的播放器全屏可能有额外限制
移动设备：移动设备的全屏行为可能与桌面不同

#Fullscreen

#概述

#状态

#状态说明

#操作

#requestFullscreen

#exitFullscreen

#toggleFullscreen

#选择器

#示例

#完整的全屏控制组件

#全屏时调整UI

#全屏状态监听

#注意事项