Npmlibrary

Source

预计阅读时间: 4 分钟

Source 功能提供对 Video.js 播放器媒体源的状态管理和加载操作，是播放视频内容的基础功能。

概述

Source 功能是 Video.js React 中用于管理媒体源的模块。它提供媒体源状态信息和加载新源的接口，支持各种视频格式和流媒体协议。

状态

属性	类型	描述
`source`	`string \| null`	当前媒体源 URL
`canPlay`	`boolean`	当前源是否可以被播放

状态说明

source：当前加载的视频源 URL，如果没有加载则为空字符串或 null
canPlay：Video.js 是否能播放当前媒体源

操作

操作	类型	描述
`loadSource`	`Action`	加载新的媒体源

loadSource

加载新的媒体源到播放器。可以是 URL 字符串或 Source 对象。

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

function SourceLoader() {
  const source = usePlayer(selectSource);
  const { loadSource } = usePlayerActions();
  
  const videoUrls = [
    'https://example.com/video1.mp4',
    'https://example.com/video2.m3u8',
    'https://example.com/video3.webm',
  ];
  
  return (
    <div className="source-loader">
      <p>当前源: {source.source || '无'}</p>
      <p>可播放: {source.canPlay ? '是' : '否'}</p>
      <div className="source-buttons">
        {videoUrls.map((url) => (
          <button key={url} onClick={() => loadSource(url)}>
            加载 {url.split('/').pop()}
          </button>
        ))}
      </div>
    </div>
  );
}

选择器

传递 selectSource 到 usePlayer 钩子以订阅媒体源状态。

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

function SourceStatus() {
  const source = usePlayer(selectSource);
  
  return (
    <div>
      <p>媒体源: {source.source || '未加载'}</p>
      <p>可播放: {source.canPlay ? '是' : '否'}</p>
    </div>
  );
}

示例

视频源选择器

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

function VideoSelector() {
  const source = usePlayer(selectSource);
  const { loadSource } = usePlayerActions();
  
  const videos = [
    { name: 'Big Buck Bunny', url: 'https://example.com/bunny.mp4' },
    { name: 'Sintel', url: 'https://example.com/sintel.mp4' },
    { name: 'Tears of Steel', url: 'https://example.com/tears.mp4' },
  ];
  
  return (
    <div className="video-selector">
      <h3>选择视频</h3>
      {videos.map((video) => (
        <button
          key={video.url}
          onClick={() => loadSource(video.url)}
          className={source.source === video.url ? 'active' : ''}
        >
          {video.name}
        </button>
      ))}
    </div>
  );
}

播放质量选择器

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

function QualitySelector() {
  const source = usePlayer(selectSource);
  const { loadSource } = usePlayerActions();
  
  const qualityLevels = [
    { name: '1080p', url: 'https://example.com/video-1080p.mp4' },
    { name: '720p', url: 'https://example.com/video-720p.mp4' },
    { name: '480p', url: 'https://example.com/video-480p.mp4' },
  ];
  
  return (
    <div className="quality-selector">
      {qualityLevels.map((level) => (
        <button
          key={level.name}
          onClick={() => loadSource(level.url)}
          disabled={!source.canPlay}
        >
          {level.name}
        </button>
      ))}
    </div>
  );
}

播放失败提示

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

function SourceErrorDisplay() {
  const source = usePlayer(selectSource);
  const error = usePlayer(selectError);
  
  if (source.source && !source.canPlay && error.error) {
    return (
      <div className="error-message">
        无法播放此视频: {error.error.message}
      </div>
    );
  }
  
  return null;
}

HLS 流加载

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

function HLSPlayer() {
  const source = usePlayer(selectSource);
  const { loadSource } = usePlayerActions();
  
  const hlsUrl = 'https://example.com/stream.m3u8';
  
  const handleLoadHLS = () => {
    loadSource(hlsUrl);
  };
  
  return (
    <div className="hls-player">
      <button onClick={handleLoadHLS}>加载 HLS 流</button>
      {source.source === hlsUrl && (
        <p>正在播放 HLS 流媒体</p>
      )}
    </div>
  );
}

源变化监听

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

function SourceChangeListener() {
  const source = usePlayer(selectSource);
  
  useEffect(() => {
    if (source.source) {
      console.log('新视频源已加载:', source.source);
      // 可以在这里执行额外的初始化逻辑
    }
  }, [source.source]);
  
  return null;
}

注意事项

格式支持：确保视频格式被浏览器和 Video.js 支持
跨域问题：视频源可能存在跨域访问限制
流媒体协议：HLS 和 DASH 需要相应的插件支持
源切换：切换源时会自动停止当前播放
MIME 类型：部分场景需要指定正确的 MIME 类型

#Source

#概述

#状态

#状态说明

#操作

#loadSource

#选择器

#示例

#视频源选择器

#播放质量选择器

#播放失败提示

#HLS 流加载

#源变化监听

#注意事项