Npmlibrary

Volume

预计阅读时间: 5 分钟

Volume 功能提供对 Video.js 播放器音量的完整管理，包括音量、静音状态和音量可用性检测。

概述

Volume 功能是 Video.js React 中用于管理播放器音量的模块。它提供音量等级、静音状态和音量控制操作，支持从 0 到 1 的音量调节。

状态

属性	类型	描述
`volume`	`number`	当前音量（0-1）
`muted`	`boolean`	是否静音
`volumeAvailability`	`boolean`	音量控制是否可用

状态说明

volume：音量值，范围 0（静音）到 1（最大音量）
muted：静音状态，true 表示已静音
volumeAvailability：音量功能是否可用，某些浏览器或环境可能禁用音量控制

操作

操作	类型	描述
`setVolume`	`Action`	设置音量值
`toggleMuted`	`Action`	切换静音状态

setVolume

设置音量值。音量值应该在 0 到 1 之间。

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

function VolumeControl() {
  const volume = usePlayer(selectVolume);
  const { setVolume } = usePlayerActions();
  
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = parseFloat(e.target.value);
    setVolume(newVolume);
  };
  
  return (
    <div className="volume-control">
      <input
        type="range"
        min="0"
        max="1"
        step="0.1"
        value={volume.volume}
        onChange={handleVolumeChange}
      />
      <span>音量: {Math.round(volume.volume * 100)}%</span>
    </div>
  );
}

toggleMuted

切换静音状态。如果当前是静音状态，则取消静音；如果当前不是静音，则进入静音状态。

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

function MuteButton() {
  const volume = usePlayer(selectVolume);
  const { toggleMuted } = usePlayerActions();
  
  return (
    <button onClick={toggleMuted}>
      {volume.muted ? '取消静音' : '静音'}
    </button>
  );
}

选择器

传递 selectVolume 到 usePlayer 钩子以订阅音量状态。

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

function VolumeStatus() {
  const volume = usePlayer(selectVolume);
  
  return (
    <div>
      <p>音量: {Math.round(volume.volume * 100)}%</p>
      <p>静音: {volume.muted ? '是' : '否'}</p>
      <p>音量控制: {volume.volumeAvailability ? '可用' : '不可用'}</p>
    </div>
  );
}

示例

音量滑块

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

function VolumeSlider() {
  const volume = usePlayer(selectVolume);
  const { setVolume } = usePlayerActions();
  const [showSlider, setShowSlider] = useState(false);
  
  return (
    <div 
      className="volume-slider-container"
      onMouseEnter={() => setShowSlider(true)}
      onMouseLeave={() => setShowSlider(false)}
    >
      <button className="volume-icon">
        {volume.muted || volume.volume === 0 ? '🔇' : volume.volume < 0.5 ? '🔉' : '🔊'}
      </button>
      {showSlider && volume.volumeAvailability && (
        <div className="volume-slider">
          <input
            type="range"
            min="0"
            max="1"
            step="0.05"
            value={volume.muted ? 0 : volume.volume}
            onChange={(e) => setVolume(parseFloat(e.target.value))}
          />
        </div>
      )}
    </div>
  );
}

静音按钮

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

function MuteToggle() {
  const volume = usePlayer(selectVolume);
  const { toggleMuted } = usePlayerActions();
  
  const getVolumeIcon = () => {
    if (volume.muted || volume.volume === 0) return 'M';
    if (volume.volume < 0.5) return 'L';
    return 'H';
  };
  
  return (
    <button 
      onClick={toggleMuted}
      className={`mute-button ${volume.muted ? 'muted' : ''}`}
    >
      {getVolumeIcon()}
    </button>
  );
}

音量百分比显示

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

function VolumePercentage() {
  const volume = usePlayer(selectVolume);
  
  // 实际音量（考虑静音状态）
  const effectiveVolume = volume.muted ? 0 : volume.volume;
  
  return (
    <div className="volume-percentage">
      <div className="volume-bar">
        <div 
          className="volume-fill" 
          style={{ width: `${effectiveVolume * 100}%` }}
        />
      </div>
      <span>{Math.round(effectiveVolume * 100)}%</span>
    </div>
  );
}

点击静音/取消静音

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

function VolumeClickHandler() {
  const volume = usePlayer(selectVolume);
  const { toggleMuted } = usePlayerActions();
  
  // 点击时切换静音
  const handleClick = () => {
    toggleMuted();
  };
  
  return (
    <button onClick={handleClick} className="volume-control-btn">
      {volume.muted ? '🔇' : '🔊'}
    </button>
  );
}

渐进式音量控制

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

function SteppedVolumeControl() {
  const volume = usePlayer(selectVolume);
  const { setVolume } = usePlayerActions();
  
  const volumeSteps = [0, 0.25, 0.5, 0.75, 1];
  
  const increaseVolume = () => {
    const currentIndex = volumeSteps.findIndex(v => v >= volume.volume);
    if (currentIndex < volumeSteps.length - 1) {
      setVolume(volumeSteps[currentIndex + 1]);
    }
  };
  
  const decreaseVolume = () => {
    const currentIndex = volumeSteps.findIndex(v => v >= volume.volume);
    if (currentIndex > 0) {
      setVolume(volumeSteps[currentIndex - 1]);
    }
  };
  
  return (
    <div className="stepped-volume">
      <button onClick={decreaseVolume}>-</button>
      <div className="volume-indicator">
        {volumeSteps.map((step, index) => (
          <div 
            key={index}
            className={`step ${volume.volume >= step ? 'active' : ''}`}
          />
        ))}
      </div>
      <button onClick={increaseVolume}>+</button>
    </div>
  );
}

注意事项

音量范围：音量值范围是 0 到 1，不是 0 到 100
静音状态：静音时音量值保持不变，只是播放时听不到声音
浏览器限制：某些浏览器或设备可能不支持音量控制
自动播放静音：自动播放时可能需要静音才能播放
记忆功能：浏览器可能会记住上次的音量设置

#Volume

#概述

#状态

#状态说明

#操作

#setVolume

#toggleMuted

#选择器

#示例

#音量滑块

#静音按钮

#音量百分比显示

#点击静音/取消静音

#渐进式音量控制

#注意事项