Npmlibrary

PlaybackRate

预计阅读时间: 4 分钟

PlaybackRate 功能提供对 Video.js 播放器播放速率的完整管理，包括速率状态访问和设置操作。

概述

PlaybackRate 功能是 Video.js React 中用于管理播放器播放速率的模块。它允许用户调整视频播放速度，支持从慢速到快速的多种倍速播放。

状态

属性	类型	描述
`playbackRates`	`number[]`	可用的播放速率选项数组
`playbackRate`	`number`	当前播放速率

状态说明

playbackRates：支持的播放速率列表，如 [0.5, 0.75, 1, 1.25, 1.5, 2]
playbackRate：当前使用的播放速率，1.0 表示正常速度

操作

操作	类型	描述
`setPlaybackRate`	`Action`	设置播放速率

setPlaybackRate

设置播放速率。速率必须在支持的速率列表中。

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

function PlaybackRateSelector() {
  const rate = usePlayer(selectPlaybackRate);
  const { setPlaybackRate } = usePlayerActions();
  
  return (
    <div className="playback-rate-selector">
      <span>播放速率: {rate.playbackRate}x</span>
      <div className="rate-options">
        {rate.playbackRates.map((r) => (
          <button
            key={r}
            onClick={() => setPlaybackRate(r)}
            className={rate.playbackRate === r ? 'active' : ''}
          >
            {r}x
          </button>
        ))}
      </div>
    </div>
  );
}

选择器

传递 selectPlaybackRate 到 usePlayer 钩子以订阅播放速率状态。

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

function PlaybackRateStatus() {
  const rate = usePlayer(selectPlaybackRate);
  
  return (
    <div>
      <p>当前速率: {rate.playbackRate}x</p>
      <p>可用速率: {rate.playbackRates.join(', ')}</p>
    </div>
  );
}

示例

播放速率控制条

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

function PlaybackRateBar() {
  const rate = usePlayer(selectPlaybackRate);
  const { setPlaybackRate } = usePlayerActions();
  
  return (
    <div className="playback-rate-bar">
      <span className="rate-label">播放速度</span>
      <div className="rate-track">
        {rate.playbackRates.map((r) => (
          <button
            key={r}
            onClick={() => setPlaybackRate(r)}
            className={`rate-point ${rate.playbackRate === r ? 'active' : ''}`}
            title={`${r}x`}
          />
        ))}
      </div>
      <span className="rate-value">{rate.playbackRate}x</span>
    </div>
  );
}

快捷播放速率按钮

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

function SpeedButtons() {
  const rate = usePlayer(selectPlaybackRate);
  const { setPlaybackRate } = usePlayerActions();
  
  const speedOptions = [
    { label: '0.5x', value: 0.5 },
    { label: '1x', value: 1 },
    { label: '1.5x', value: 1.5 },
    { label: '2x', value: 2 },
  ];
  
  return (
    <div className="speed-buttons">
      {speedOptions.map((option) => (
        <button
          key={option.value}
          onClick={() => setPlaybackRate(option.value)}
          className={rate.playbackRate === option.value ? 'active' : ''}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}

速率变化提示

import { selectPlaybackRate, usePlayer } from '@videojs/react';
import { useEffect, useState } from 'react';

function RateChangeNotice() {
  const rate = usePlayer(selectPlaybackRate);
  const [showNotice, setShowNotice] = useState(false);
  
  useEffect(() => {
    setShowNotice(true);
    const timer = setTimeout(() => setShowNotice(false), 2000);
    return () => clearTimeout(timer);
  }, [rate.playbackRate]);
  
  if (!showNotice) return null;
  
  return (
    <div className="rate-notice">
      播放速度: {rate.playbackRate}x
    </div>
  );
}

循环切换速率

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

function CyclePlaybackRate() {
  const rate = usePlayer(selectPlaybackRate);
  const { setPlaybackRate } = usePlayerActions();
  
  const cycleRate = () => {
    const currentIndex = rate.playbackRates.indexOf(rate.playbackRate);
    const nextIndex = (currentIndex + 1) % rate.playbackRates.length;
    setPlaybackRate(rate.playbackRates[nextIndex]);
  };
  
  return (
    <button onClick={cycleRate}>
      当前: {rate.playbackRate}x (点击切换)
    </button>
  );
}

注意事项

速率限制：播放速率必须在播放器支持的范围内
音频质量：高倍速播放时音频质量可能下降
流媒体支持：部分流媒体协议可能不支持某些速率
记忆功能：播放速率可能在会话间被记住
倍速限制：部分版权内容可能限制倍速播放

#PlaybackRate

#概述

#状态

#状态说明

#操作

#setPlaybackRate

#选择器

#示例

#播放速率控制条

#快捷播放速率按钮

#速率变化提示

#循环切换速率

#注意事项