zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(html): reorganize import paths by use case (#480)

Browse Source
This commit is contained in:
rahim
2026-02-09 20:49:42 +11:00
committed by GitHub
parent 5f5ffb9f0a
commit 870cbb77e4
18 changed files with 178 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rfc/player-api/examples.md
+21 -21
View File
@@ -29,7 +29,7 @@ function App() {
### HTML
```ts
import '@videojs/html/player/video';
import '@videojs/html/video/player';
```
```html
@@ -44,11 +44,11 @@ import '@videojs/html/player/video';
### React
```tsx
import '@videojs/react/skin/video.css';
import '@videojs/react/video/skin.css';
import { createPlayer } from '@videojs/react';
import { features } from '@videojs/core/dom';
import { VideoSkin } from '@videojs/react/skin/video';
import { VideoSkin } from '@videojs/react/video/skin';
const { Provider: VideoProvider } = createPlayer({
features: [...features.video],
@@ -68,9 +68,9 @@ function App() {
### HTML
```ts
import '@videojs/html/player/video';
import '@videojs/html/skin/video.css';
import '@videojs/html/skin/video';
import '@videojs/html/video/player';
import '@videojs/html/video/skin.css';
import '@videojs/html/video/skin';
```
```html
@@ -88,11 +88,11 @@ Skin detects chapters feature, shows chapter menu.
### React
```tsx
import '@videojs/react/skin/video.css';
import '@videojs/react/video/skin.css';
import { createPlayer } from '@videojs/react';
import { features, chaptersSlice } from '@videojs/core/dom';
import { VideoSkin } from '@videojs/react/skin/video';
import { VideoSkin } from '@videojs/react/video/skin';
const { Provider: VideoProvider } = createPlayer({
features: [...features.video, chaptersSlice],
@@ -112,10 +112,10 @@ function App() {
### HTML
```ts
import '@videojs/html/player/video';
import '@videojs/html/video/player';
import '@videojs/html/feature/chapters';
import '@videojs/html/skin/video.css';
import '@videojs/html/skin/video';
import '@videojs/html/video/skin.css';
import '@videojs/html/video/skin';
```
```html
@@ -133,12 +133,12 @@ Skin detects streaming features, shows quality/tracks menus.
### React
```tsx
import '@videojs/react/skin/video.css';
import '@videojs/react/video/skin.css';
import { createPlayer } from '@videojs/react';
import { features } from '@videojs/core/dom';
import { HlsVideo } from '@videojs/react/media/hls';
import { VideoSkin } from '@videojs/react/skin/video';
import { VideoSkin } from '@videojs/react/video/skin';
const { Provider: VideoProvider } = createPlayer({
features: [...features.video, ...features.streaming],
@@ -158,11 +158,11 @@ function App() {
### HTML
```ts
import '@videojs/html/player/video';
import '@videojs/html/video/player';
import '@videojs/html/feature/streaming';
import '@videojs/html/media/hls-video';
import '@videojs/html/skin/video.css';
import '@videojs/html/skin/video';
import '@videojs/html/video/skin.css';
import '@videojs/html/video/skin';
```
```html
@@ -180,12 +180,12 @@ Same skin adapts to show ad UI.
### React
```tsx
import '@videojs/react/skin/video.css';
import '@videojs/react/video/skin.css';
import { createPlayer } from '@videojs/react';
import { features } from '@videojs/core/dom';
import { HlsVideo } from '@videojs/react/media/hls';
import { VideoSkin } from '@videojs/react/skin/video';
import { VideoSkin } from '@videojs/react/video/skin';
const { Provider: VideoProvider } = createPlayer({
features: [...features.video, ...features.streaming, ...features.ads],
@@ -205,12 +205,12 @@ function App() {
### HTML
```ts
import '@videojs/html/player/video';
import '@videojs/html/video/player';
import '@videojs/html/feature/streaming';
import '@videojs/html/feature/ads';
import '@videojs/html/media/hls-video';
import '@videojs/html/skin/video.css';
import '@videojs/html/skin/video';
import '@videojs/html/video/skin.css';
import '@videojs/html/video/skin';
```
## 6. Full Custom (Escape Hatch)