Npmlibrary

Playback

预计阅读时间: 5 分钟

Playback 功能提供对 Video.js 播放器播放状态的完整管理，包括播放/暂停操作和播放状态追踪。

概述

Playback 功能是 Video.js React 中用于管理播放器播放状态的模块。它提供播放状态信息和播放控制操作，是构建播放器界面最常用的功能之一。

状态

属性	类型	描述
`paused`	`boolean`	视频是否暂停
`ended`	`boolean`	视频是否已结束播放
`started`	`boolean`	视频是否已开始播放
`waiting`	`boolean`	播放器是否正在等待数据

状态说明

paused：当视频暂停时为 true，播放时为 false
ended：当视频播放结束时为 true
started：当视频首次开始播放时为 true
waiting：当播放器等待更多数据时为 true（缓冲中）

操作

操作	类型	描述
`play`	`Action`	开始或恢复播放
`pause`	`Action`	暂停播放
`togglePaused`	`Action`	切换播放/暂停状态

play

开始或恢复视频播放。如果视频已结束，会从头开始播放。

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

function PlayButton() {
  const playback = usePlayer(selectPlayback);
  const { play } = usePlayerActions();
  
  return (
    <button onClick={play} disabled={!playback.paused}>
      播放
    </button>
  );
}

pause

暂停视频播放。

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

function PauseButton() {
  const playback = usePlayer(selectPlayback);
  const { pause } = usePlayerActions();
  
  return (
    <button onClick={pause} disabled={playback.paused}>
      暂停
    </button>
  );
}

togglePaused

切换播放/暂停状态。

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

function TogglePlayButton() {
  const playback = usePlayer(selectPlayback);
  const { togglePaused } = usePlayerActions();
  
  return (
    <button onClick={togglePaused}>
      {playback.paused ? '播放' : '暂停'}
    </button>
  );
}

选择器

传递 selectPlayback 到 usePlayer 钩子以订阅播放状态。

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

function PlaybackStatus() {
  const playback = usePlayer(selectPlayback);
  
  return (
    <div>
      <p>播放状态: {playback.paused ? '暂停' : '播放中'}</p>
      <p>已结束: {playback.ended ? '是' : '否'}</p>
      <p>已开始: {playback.started ? '是' : '否'}</p>
      <p>等待中: {playback.waiting ? '是' : '否'}</p>
    </div>
  );
}

示例

播放控制按钮

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

function PlaybackControls() {
  const playback = usePlayer(selectPlayback);
  const { play, pause, togglePaused } = usePlayerActions();
  
  return (
    <div className="playback-controls">
      <button 
        onClick={play} 
        disabled={!playback.paused || playback.ended}
        className="play-btn"
      >
        播放
      </button>
      <button 
        onClick={pause} 
        disabled={playback.paused}
        className="pause-btn"
      >
        暂停
      </button>
      <button onClick={togglePaused} className="toggle-btn">
        {playback.paused ? '播放/暂停' : '暂停/播放'}
      </button>
    </div>
  );
}

播放状态指示器

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

function PlaybackIndicator() {
  const playback = usePlayer(selectPlayback);
  
  const getStatusText = () => {
    if (playback.waiting) return '加载中...';
    if (playback.ended) return '播放结束';
    if (playback.paused) return '已暂停';
    return '播放中';
  };
  
  const getStatusClass = () => {
    if (playback.waiting) return 'status-waiting';
    if (playback.ended) return 'status-ended';
    if (playback.paused) return 'status-paused';
    return 'status-playing';
  };
  
  return (
    <div className={`playback-indicator ${getStatusClass()}`}>
      {getStatusText()}
    </div>
  );
}

缓冲指示器

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

function BufferIndicator() {
  const playback = usePlayer(selectPlayback);
  
  if (!playback.waiting) return null;
  
  return (
    <div className="buffer-indicator">
      <div className="spinner"></div>
      <span>正在缓冲...</span>
    </div>
  );
}

播放结束处理

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

function EndOfVideo() {
  const playback = usePlayer(selectPlayback);
  const source = usePlayer(selectSource);
  const { play } = usePlayerActions();
  
  if (!playback.ended) return null;
  
  return (
    <div className="end-screen">
      <h2>播放结束</h2>
      <button onClick={play}>重新播放</button>
    </div>
  );
}

自动播放静音

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

function AutoplayHandler() {
  const playback = usePlayer(selectPlayback);
  const { play } = usePlayerActions();
  
  useEffect(() => {
    // 自动播放可能被阻止，显示提示
    if (!playback.started && !playback.paused) {
      console.log('自动播放被阻止');
    }
  }, [playback.started, playback.paused]);
  
  return null;
}

注意事项

自动播放限制：现代浏览器对自动播放视频有限制，可能需要静音才能自动播放
跨域限制：某些视频源可能存在跨域限制
状态同步：播放状态可能因网络问题而变化
用户交互：某些操作可能需要用户交互才能触发
权限要求：部分浏览器需要用户授权才能自动播放音频

#Playback

#概述

#状态

#状态说明

#操作

#play

#pause

#togglePaused

#选择器

#示例

#播放控制按钮

#播放状态指示器

#缓冲指示器

#播放结束处理

#自动播放静音

#注意事项