diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx index 7c6c9f3e..17db8824 100644 --- a/site/src/content/docs/concepts/skins.mdx +++ b/site/src/content/docs/concepts/skins.mdx @@ -10,13 +10,14 @@ import MinimalFrame from '@/components/frames/Minimal.astro'; import DocsLink from '@/components/docs/DocsLink.astro'; import DocsLinkCard from '@/components/docs/DocsLinkCard.astro'; import Aside from '@/components/Aside.astro'; - +import EjectedSkin from '@/components/docs/EjectedSkin.astro'; + ```html @@ -25,6 +26,7 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se ``` + ```tsx @@ -37,7 +39,6 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se ``` - ## Packaged vs. ejected When you choose a skin you have two options for how you use it: **packaged** or **ejected**. It's usually easiest to start with a packaged skin and later eject its internal components into your project when you need more customization. @@ -52,15 +53,18 @@ When you choose a skin you have two options for how you use it: **packaged** or Read more about UI Components ### Example of packaged + + ```html - + ``` + ```tsx @@ -73,259 +77,71 @@ When you choose a skin you have two options for how you use it: **packaged** or ### Example of ejected + -```html title="index.html" - - - - - - - - - - - - - - - - - - 10 - - - - - - - 10 - - - - - 0:00 - - - - - - - - 0:25 - - - - - - - - - - - - - - - - - - - - - - - - -``` + -```tsx title="VideoSkin.tsx" - - - ( -
- -
- )} - /> - - ( -
-
-
-

- Something went wrong. -

-

- An error occurred while trying to play the video. Please try again. -

-
-
- -
-
-
- )} - /> - - - - ( - - )} - /> - - ( - - )} - /> - - ( - - )} - /> - - - - - - - - - - - - - - - - - - - - - )} - /> - } - /> - - - - - - - - - - - ( - - )} - /> - - ( - - )} - /> - - ( - - )} - /> - - - - {/*
-
- An example cue - -

Another example cue with HTML

- -
-
*/} - -
- - {children} - - -``` + - ## Skins, features, and presets Each skin is built with specific features in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn't. The features associated with a skin are called a **feature bundle**. + | Player with feature bundle | Available skins | Import | -|----------|-----------------|--------| +| ---------- | ----------------- | -------- | | `` | ``, `` | `@videojs/html/video/*` | | `` | ``, `` | `@videojs/html/audio/*` | | `` | `` | `@videojs/html/background/*` | + + | Feature bundle | Available skins | Import | -|----------|-----------------|--------| +| ---------- | ----------------- | -------- | | `videoFeatures` | ``, `` | `@videojs/react/video` | | `audioFeatures` | ``, `` | `@videojs/react/audio` | | `backgroundFeatures` | `` | `@videojs/react/background` | + Want to learn more about skins and feature bundles? Check out the presets guide: Learn more about presets + +## Styling + +There are currently two options for styling: + + + +- Vanilla CSS where you import the stylesheet in your app. This is the default. +- Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app. + + + + + +- Vanilla CSS that's automatically imported. This is the default. +- Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app. + + + +### Current limitations + +- In both style systems we assume a 16px root font size and we use rem units for sizing. +- The default font stack includes Inter Variable and Inter (because it looks awesome) but we do not load them, as webfonts for you. If they are not available then system fonts are used. + +#### Vanilla CSS + +- We use a [BEM](https://en.bem.info/methodology/quick-start/) classname structure and every component classname is scoped with a `media-` prefix. + +#### Tailwind + +- Currently we're assuming you're using the default configuration and that's all that's supported. With the release of our CLI, this will change, allowing you to specify a custom prefix to the Tailwind classnames. For now, you'll need to edit the ejected skins yourself. +- We're assuming the latest version, currently 4.2.x. diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx index 7d5756f4..e8e2085a 100644 --- a/site/src/content/docs/how-to/customize-skins.mdx +++ b/site/src/content/docs/how-to/customize-skins.mdx @@ -6,13 +6,26 @@ description: Learn how to customize Video.js v10 skins by copying and modifying import FrameworkCase from '@/components/docs/FrameworkCase.astro'; import EjectedSkin from '@/components/docs/EjectedSkin.astro'; -Video.js v10 comes with pre-built skins like Default and Minimal. If you'd like to customize them you can fully customize them by "ejecting" the code and making it your own. +Video.js v10 comes with two pre-built skins; Default and Minimal. Basic customization is possible with CSS custom properties, but if you want more control over the design and functionality of your player, you can copy the skin's code into your project and modify it as needed. We call this "ejecting" the skin, since you're taking the internal code that makes up the skin and making it your own. + +## Basic customization + +| Property Name | Description | Type | Example | +| ------------- | ----------- | ---- | ------- | +| `--media-border-radius` | The border radius of the media player | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` | +| `--media-color-primary` | The color of icons and text in media controls | [``](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `red` | + +You can of course also add your own classnames to the skins themselves. + +## Ejecting + +If you'd like to customize them you can fully customize them by "ejecting" the code and making it your own. While eventually we’ll have a CLI that will eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations. -{/* TODO: Add StyleCase for tailwind variants once tailwind is a supported style (see #840) */} +{/*TODO: Add StyleCase for tailwind variants once tailwind is a supported style (see #840)*/} -## Default Video Skin +### Default Video Skin @@ -22,7 +35,7 @@ While eventually we’ll have a CLI that will eject skins in your preferred fram -## Default Audio Skin +### Default Audio Skin @@ -32,7 +45,7 @@ While eventually we’ll have a CLI that will eject skins in your preferred fram -## Minimal Video Skin +### Minimal Video Skin @@ -42,7 +55,7 @@ While eventually we’ll have a CLI that will eject skins in your preferred fram -## Minimal Audio Skin +### Minimal Audio Skin diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx index 55639904..6179b1b4 100644 --- a/site/src/content/docs/how-to/installation.mdx +++ b/site/src/content/docs/how-to/installation.mdx @@ -38,7 +38,6 @@ Video.js aims to provide idiomatic development experiences in your favorite JS a - ## Choose your use case The default presets work well for general website playback. More pre-built players to come. @@ -96,25 +95,61 @@ Video.js supports a wide range of file types and hosting services. It's easy to + ## Use your player + + ## Create your player + Add it to your components folder in a new file. ## Use your player + +## CSP + +If your application uses a Content Security Policy, you may need to allow additional sources for player features to work correctly. + +### Common requirements + +- `media-src` must allow your media URLs. +- `img-src` must allow any poster or thumbnail image URLs. +- `connect-src` must allow HLS manifests, playlists, captions, and segment requests when using HLS playback. +- `media-src blob:` is required when using the HLS player variants, which use MSE-backed playback. +- `worker-src blob:` is required when using the `hls.js` player variants. +- `style-src 'unsafe-inline'` is currently required for some player UI and HTML player styling behavior. + +### Example + +```http +Content-Security-Policy: + script-src 'self'; + style-src 'self' 'unsafe-inline'; + img-src 'self' https: data: blob:; + media-src 'self' https: blob:; + connect-src 'self' https:; + worker-src 'self' blob:; +``` + +## Styling + +See the [skins styling](../concepts/skins#styling) section. + +---- + That's it! You now have a fully functional Video.js player. Go forth and play. Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](/html5-video-support).