Npmlibrary

RemotePlayback

预计阅读时间: 4 分钟

RemotePlayback 功能提供对 Video.js 播放器远程播放设备（如 Chromecast、Apple TV 等）的状态管理和控制。

概述

RemotePlayback 功能是 Video.js React 中用于管理远程播放设备的模块。它允许用户将视频内容投射到其他设备上播放，支持远程播放状态检测和设备切换。

状态

属性	类型	描述
`remotePlaybackState`	`string`	远程播放状态 ('connecting' \| 'connected' \| 'disconnected')
`remotePlaybackAvailability`	`boolean`	远程播放功能是否可用

状态说明

remotePlaybackState：
- connecting：正在连接到远程设备
- connected：已连接到远程设备并正在播放
- disconnected：未连接远程设备
remotePlaybackAvailability：检测浏览器或设备是否支持远程播放

操作

操作	类型	描述
`toggleRemotePlayback`	`Action`	切换远程播放状态

toggleRemotePlayback

打开或关闭远程播放选择器，让用户选择要投射的设备。

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

function RemotePlaybackButton() {
  const remote = usePlayer(selectRemotePlayback);
  const { toggleRemotePlayback } = usePlayerActions();
  
  return (
    <button 
      onClick={toggleRemotePlayback}
      disabled={!remote.remotePlaybackAvailability}
    >
      {remote.remotePlaybackState === 'connected' 
        ? '断开远程播放' 
        : '投屏'}
    </button>
  );
}

选择器

传递 selectRemotePlayback 到 usePlayer 钩子以订阅远程播放状态。

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

function RemotePlaybackStatus() {
  const remote = usePlayer(selectRemotePlayback);
  
  const getStatusText = () => {
    switch (remote.remotePlaybackState) {
      case 'connecting':
        return '连接中...';
      case 'connected':
        return '已连接到远程设备';
      case 'disconnected':
      default:
        return '未连接';
    }
  };
  
  return (
    <div>
      <p>远程播放: {getStatusText()}</p>
      <p>可用: {remote.remotePlaybackAvailability ? '是' : '否'}</p>
    </div>
  );
}

示例

远程播放控制组件

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

function RemotePlaybackControls() {
  const remote = usePlayer(selectRemotePlayback);
  const { toggleRemotePlayback } = usePlayerActions();
  
  if (!remote.remotePlaybackAvailability) {
    return <div>您的设备不支持远程播放</div>;
  }
  
  const getStatusIcon = () => {
    switch (remote.remotePlaybackState) {
      case 'connected':
        return '📺';
      case 'connecting':
        return '⏳';
      default:
        return '📱';
    }
  };
  
  return (
    <button onClick={toggleRemotePlayback} className="remote-btn">
      <span className="icon">{getStatusIcon()}</span>
      <span className="label">
        {remote.remotePlaybackState === 'connected' ? '已投屏' : '投屏'}
      </span>
    </button>
  );
}

投屏状态指示器

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

function CastingIndicator() {
  const remote = usePlayer(selectRemotePlayback);
  
  if (remote.remotePlaybackState !== 'connected') return null;
  
  return (
    <div className="casting-indicator">
      <span className="casting-icon">📺</span>
      <span>正在远程播放</span>
    </div>
  );
}

连接中状态

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

function RemotePlaybackOverlay() {
  const remote = usePlayer(selectRemotePlayback);
  const { toggleRemotePlayback } = usePlayerActions();
  
  if (remote.remotePlaybackState !== 'connecting') return null;
  
  return (
    <div className="connecting-overlay">
      <div className="connecting-spinner"></div>
      <p>正在连接到远程设备...</p>
      <button onClick={toggleRemotePlayback}>取消</button>
    </div>
  );
}

本地/远程切换提示

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

function PlaybackModeNotice() {
  const remote = usePlayer(selectRemotePlayback);
  const [showNotice, setShowNotice] = useState(false);
  const [previousState, setPreviousState] = useState(remote.remotePlaybackState);
  
  useEffect(() => {
    if (previousState !== remote.remotePlaybackState) {
      setShowNotice(true);
      setPreviousState(remote.remotePlaybackState);
      
      const timer = setTimeout(() => setShowNotice(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [remote.remotePlaybackState, previousState]);
  
  if (!showNotice) return null;
  
  const getMessage = () => {
    switch (remote.remotePlaybackState) {
      case 'connected':
        return '已切换到远程播放';
      case 'disconnected':
        return '已切换到本地播放';
      default:
        return '';
    }
  };
  
  return (
    <div className="mode-notice">
      {getMessage()}
    </div>
  );
}

注意事项

设备支持：远程播放需要支持 Cast/AirPlay 等协议的设备
网络要求：本地设备和远程播放设备需要在同一网络
协议支持：不同平台支持不同的远程播放协议
权限控制：部分平台需要用户授权才能使用远程播放
自动断开：页面关闭可能导致远程播放自动断开

#RemotePlayback

#概述

#状态

#状态说明

#操作

#toggleRemotePlayback

#选择器

#示例

#远程播放控制组件

#投屏状态指示器

#连接中状态

#本地/远程切换提示

#注意事项