Npmlibrary

Controls

预计阅读时间: 4 分钟

Controls 功能管理 Video.js 播放器的控制栏显示状态和用户活动追踪。它提供控制栏的显示/隐藏切换以及用户活动检测。

概述

Controls 功能是 Video.js React 中用于管理播放器控制栏状态的模块。它追踪用户活动并自动控制控制栏的可见性，这对于实现自定义控制栏和交互提示等功能至关重要。

状态

属性	类型	描述
`userActivity`	`boolean`	用户是否与播放器进行了交互
`controlsVisible`	`boolean`	控制栏是否可见

状态说明

userActivity：当用户移动鼠标、点击或触摸播放器时变为 true，一段时间后自动重置为 false
controlsVisible：控制栏的可见性，可能受播放器暂停状态和用户活动影响

操作

操作	类型	描述
`toggleControls`	`Action`	切换控制栏的显示/隐藏状态

toggleControls

手动切换控制栏的可见性。

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

function ToggleControlsButton() {
  const controls = usePlayer(selectControls);
  const { toggleControls } = usePlayerActions();
  
  return (
    <button onClick={toggleControls}>
      控制栏当前: {controls.controlsVisible ? '可见' : '隐藏'}
    </button>
  );
}

选择器

传递 selectControls 到 usePlayer 钩子以订阅控制栏状态。

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

function ControlsStatus() {
  const controls = usePlayer(selectControls);
  
  return (
    <div>
      <p>用户活动: {controls.userActivity ? '活跃' : '静止'}</p>
      <p>控制栏: {controls.controlsVisible ? '可见' : '隐藏'}</p>
    </div>
  );
}

示例

自动显示/隐藏控制栏

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

function AutoControlsOverlay() {
  const controls = usePlayer(selectControls);
  
  return (
    <div className={`controls-overlay ${controls.controlsVisible ? 'visible' : 'hidden'}`}>
      {/* 自定义控制栏内容 */}
    </div>
  );
}

用户活动指示器

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

function ActivityIndicator() {
  const controls = usePlayer(selectControls);
  
  return (
    <div className={`activity-indicator ${controls.userActivity ? 'active' : 'idle'}`}>
      {controls.userActivity ? '用户正在交互' : '等待用户操作'}
    </div>
  );
}

与播放状态结合

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

function SmartControls() {
  const controls = usePlayer(selectControls);
  const playback = usePlayer(selectPlayback);
  
  // 暂停时始终显示控制栏
  const showControls = controls.controlsVisible || playback.paused;
  
  return (
    <div className={`video-controls ${showControls ? 'visible' : 'hidden'}`}>
      {/* 控制栏内容 */}
    </div>
  );
}

全屏控制栏特殊处理

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

function FullscreenControls() {
  const controls = usePlayer(selectControls);
  const fullscreen = usePlayer(selectFullscreen);
  
  // 全屏模式下调整控制栏样式
  const controlsClass = fullscreen.fullscreen 
    ? 'controls-fullscreen' 
    : 'controls-normal';
  
  return (
    <div className={`${controlsClass} ${controls.controlsVisible ? 'visible' : ''}`}>
      {/* 控制栏内容 */}
    </div>
  );
}

注意事项

自动隐藏：控制栏通常会在用户不活动一段时间后自动隐藏
暂停状态：视频暂停时，控制栏通常保持可见
触摸设备：在触摸设备上，用户活动行为可能不同
全屏模式：全屏状态下控制栏的行为可能有特殊处理

#Controls

#概述

#状态

#状态说明

#操作

#toggleControls

#选择器

#示例

#自动显示/隐藏控制栏

#用户活动指示器

#与播放状态结合

#全屏控制栏特殊处理

#注意事项