Npmlibrary

功能特性

预计阅读时间: 4 分钟

每个功能添加到播放器的状态和方法。

并非每个播放器都需要支持每个用例。为了解决这个问题，Video.js 有一个功能概念——自包含的播放器功能单元。每个功能都会向播放器添加状态属性和方法。例如，"playback"添加 paused 和 play()，"volume"添加 volume 和 setVolume()，等等。

使用功能

功能包和预设

你可能不想手动挑选播放器需要的每个功能。功能包将特定用例所需的功能分组到单个数组中。

例如，videoFeatures 捆绑了 playback、volume、time、fullscreen 等——一般视频播放器所需的一切：

import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

功能包通常与预设中的特定皮肤和媒体元素配对。要了解有关此内容的更多信息以及可用的预设，请查看预设指南。

了解更多关于预设

使用单个功能创建播放器

如果你不使用预设，可以创建具有单个功能的播放器。

import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';

const Player = createPlayer({
  features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
});

扩展功能包

由于功能包本质上只是一个功能数组，扩展它并不需要太多工作。例如，如果你使用 /background 预设并希望在背景视频上添加播放按钮，你可能会添加 playback 功能。

import { createPlayer, playbackFeature } from '@videojs/react';
import { backgroundFeatures } from '@videojs/react/background';

const Player = createPlayer({
  features: [...backgroundFeatures, playbackFeature],
});

在组件中访问功能

你通过 usePlayer 访问功能状态和方法：

// 订阅状态（当所选值更改时重新渲染）
const { paused, volume } = usePlayer((s) => ({
  paused: s.paused,
  volume: s.volume,
}));

// 调用方法
const store = usePlayer();
store.play();
store.setVolume(0.8);

功能选择器

每个功能还有一个预构建的选择器（例如 selectPlayback、selectVolume），它只返回该功能的状态和方法：

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

const playback = usePlayer(selectPlayback);
playback?.play();

检查功能支持

Volume、fullscreen 和 picture-in-picture 暴露一个 *Availability 属性，因为平台支持各不相同。例如，iOS Safari 不允许程序化音量控制。

值	含义
`'available'`	准备使用
`'unavailable'`	可以工作，但尚未就绪
`'unsupported'`	平台永远无法执行此操作

依赖可用性的组件（如 PiPButton 和 FullscreenButton）暴露一个 data-availability 属性，因此你可以使用 CSS 隐藏不支持的控件：

.pip-button[data-availability="unsupported"] {
  display: none;
}

你也可以在 JS 中检查可用性：

function PiPControl() {
  const availability = usePlayer((s) => s.pipAvailability);

  if (availability === 'unsupported') return null;

  return <PiPButton />;
}

上一步： 浏览器支持

下一步： 皮肤

#功能特性

#使用功能

#功能包和预设

#使用单个功能创建播放器

#扩展功能包

#在组件中访问功能

#功能选择器

#检查功能支持