如何在Shaka Player中使用React组件作为自定义控件？

1. 先禁用Shaka默认控件 #

初始化Shaka Player时，通过配置关闭自带控件，避免和自定义React控件冲突：

const player = new shaka.Player(videoElement);
player.configure({
  controls: false, // 关闭默认控件面板
});

2. 编写React自定义控件组件 #

用React状态管理播放状态、进度、音量等数据，通过Shaka Player的API实现交互逻辑，示例组件如下：

import { useState, useEffect, useRef } from 'react';

const ShakaPlayerControls = ({ player }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(1);

  useEffect(() => {
    if (!player) return;

    // 定义状态更新函数
    const updatePlayState = () => setIsPlaying(player.isPlaying());
    const updateCurrentTime = () => setCurrentTime(player.getCurrentTime());
    const updateDuration = () => setDuration(player.getDuration());
    const updateVolume = () => setVolume(player.getVolume());

    // 绑定Shaka事件监听
    player.addEventListener('play', updatePlayState);
    player.addEventListener('pause', updatePlayState);
    player.addEventListener('timeupdate', updateCurrentTime);
    player.addEventListener('loadedmetadata', updateDuration);
    player.addEventListener('volumechange', updateVolume);

    // 初始化状态
    updatePlayState();
    updateDuration();
    updateVolume();

    // 组件卸载时移除监听
    return () => {
      player.removeEventListener('play', updatePlayState);
      player.removeEventListener('pause', updatePlayState);
      player.removeEventListener('timeupdate', updateCurrentTime);
      player.removeEventListener('loadedmetadata', updateDuration);
      player.removeEventListener('volumechange', updateVolume);
    };
  }, [player]);

  // 播放/暂停切换
  const togglePlay = () => {
    player.isPlaying() ? player.pause() : player.play();
  };

  // 进度条拖动跳转
  const handleSeek = (e) => {
    const newTime = parseFloat(e.target.value);
    player.seek(newTime);
    setCurrentTime(newTime);
  };

  // 音量调整
  const handleVolumeChange = (e) => {
    const newVolume = parseFloat(e.target.value);
    player.setVolume(newVolume);
    setVolume(newVolume);
  };

  return (
    <div className="shaka-custom-controls">
      <button onClick={togglePlay}>
        {isPlaying ? '⏸️ 暂停' : '▶️ 播放'}
      </button>
      <input
        type="range"
        min="0"
        max={duration || 0}
        value={currentTime}
        onChange={handleSeek}
      />
      <span>{Math.floor(currentTime)}/{Math.floor(duration)}</span>
      <input
        type="range"
        min="0"
        max="1"
        step="0.1"
        value={volume}
        onChange={handleVolumeChange}
      />
    </div>
  );
};

export default ShakaPlayerControls;

3. 整合Shaka Player与React组件 #

创建父组件，初始化Shaka Player并将实例传递给自定义控件：

import { useRef, useEffect } from 'react';
import shaka from 'shaka-player';
import ShakaPlayerControls from './ShakaPlayerControls';

const ShakaPlayerWrapper = ({ streamUrl }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!videoRef.current) return;

    // 初始化Shaka Player
    const player = new shaka.Player(videoRef.current);
    playerRef.current = player;

    // 加载媒体流
    async function loadStream() {
      try {
        await player.load(streamUrl);
      } catch (error) {
        console.error('媒体加载失败:', error);
      }
    }

    loadStream();

    // 组件卸载时销毁播放器
    return () => {
      player.destroy();
    };
  }, [streamUrl]);

  return (
    <div className="shaka-player-container">
      <video ref={videoRef} width="100%" />
      <ShakaPlayerControls player={playerRef.current} />
    </div>
  );
};

export default ShakaPlayerWrapper;

4. 自定义控件样式 #

根据需求给React控件添加CSS样式，示例：

.shaka-custom-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
}

.shaka-custom-controls button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

.shaka-custom-controls input[type="range"] {
  flex: 1;
}

5. 扩展高级功能（可选） #

如果需要全屏、字幕切换、画质选择等功能，直接通过Shaka API实现：

• 全屏：调用videoElement.requestFullscreen()，监听fullscreenchange事件更新状态
• 字幕：通过player.getTextTracks()获取字幕列表，切换时调用player.selectTextTrack()
• 画质：通过player.getVariantTracks()获取画质选项，切换时调用player.selectVariantTrack()

内容的提问来源于stack exchange，提问作者Debjit Sinha