docs(site): fix feature export names in features and presets guides (#1513)

Co-authored-by: Darius Cepulis <dcepulis@mux.com>
Co-authored-by: Darius Cepulis <de.cepulis@gmail.com>
This commit is contained in:
Ronald Urbina
2026-05-18 13:37:59 -03:00
committed by GitHub
co-authored by Darius Cepulis Darius Cepulis
parent cc22f9fa81
commit c164c0a178
3 changed files with 16 additions and 16 deletions
+8 -8
View File
@@ -50,20 +50,20 @@ If you're not using presets, you can create a player that has individual feature
<FrameworkCase frameworks={["react"]}>
```tsx
import { createPlayer, playback, volume, time } from '@videojs/react';
import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';
const Player = createPlayer({
features: [playback, volume, time],
features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
});
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```ts
import { createPlayer, playback, volume, time } from '@videojs/html';
import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({ // [!code focus]
features: [playback, volume, time], // [!code focus]
features: [playbackFeature, volumeFeature, timeFeature, controlsFeature], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
@@ -80,22 +80,22 @@ Since feature bundles are just an array of features under the hood, it doesn't t
<FrameworkCase frameworks={["react"]}>
```tsx
import { createPlayer, playback } from '@videojs/react';
import { createPlayer, playbackFeature } from '@videojs/react';
import { backgroundFeatures } from '@videojs/react/background';
const Player = createPlayer({
features: [...backgroundFeatures, playback],
features: [...backgroundFeatures, playbackFeature],
});
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```ts
import { createPlayer, playback } from '@videojs/html';
import { createPlayer, playbackFeature } from '@videojs/html';
import { backgroundFeatures } from '@videojs/html/background';
import { MediaElement } from '@videojs/html';
const { ProviderMixin } = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
features: [...backgroundFeatures, playbackFeature], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
+4 -4
View File
@@ -74,11 +74,11 @@ Add features to a preset's feature bundle to enable new functionality. For examp
<FrameworkCase frameworks={["react"]}>
```tsx title="App.tsx"
import { createPlayer, playback } from '@videojs/react';
import { createPlayer, playbackFeature } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';
const Player = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
features: [...backgroundFeatures, playbackFeature], // [!code focus]
}); // [!code focus]
function Hero() {
@@ -96,13 +96,13 @@ function Hero() {
<FrameworkCase frameworks={["html"]}>
```html title="index.html"
<script type="module">
import { createPlayer, playback, MediaElement } from '@videojs/html';
import { createPlayer, playbackFeature, MediaElement } from '@videojs/html';
import { backgroundFeatures } from '@videojs/html/background';
import '@videojs/html/media/container';
import '@videojs/html/ui/play-button';
const { ProviderMixin } = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
features: [...backgroundFeatures, playbackFeature], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
@@ -84,19 +84,19 @@ Most player libraries ship every feature in one bundle, so you carry code you do
<FrameworkCase frameworks={["react"]}>
```tsx
import { createPlayer, playback, time } from '@videojs/react';
import { createPlayer, playbackFeature, timeFeature } from '@videojs/react';
const Player = createPlayer({
features: [playback, time], // [!code focus]
features: [playbackFeature, timeFeature], // [!code focus]
});
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```ts
import { createPlayer, playback, time } from '@videojs/html';
import { createPlayer, playbackFeature, timeFeature } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [playback, time], // [!code focus]
features: [playbackFeature, timeFeature], // [!code focus]
});
```
</FrameworkCase>