mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
80 lines
3.8 KiB
Plaintext
80 lines
3.8 KiB
Plaintext
---
|
|
title: Inline player
|
|
docs-libs: [plyr]
|
|
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
|
description: Embed audio and video with a lightweight, accessible media player that supports HTML5, YouTube, and Vimeo sources.
|
|
related: [/ui/components/carousel]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import { Code } from 'astro:components';
|
|
import TabsPackage from '@components/TabsPackage.astro';
|
|
import { site } from '@shared/lib/site.ts';
|
|
|
|
## Overview
|
|
|
|
The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
|
|
|
|
## Installation
|
|
|
|
To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm:
|
|
|
|
<TabsPackage name="plyr" />
|
|
|
|
Or include it from a CDN. Plyr draws its own controls, so the stylesheet is required - without it the player falls back to the browser's native controls.
|
|
|
|
<Code
|
|
lang="html"
|
|
code={`<link rel="stylesheet" href="${site.cdnUrl}/dist/libs/plyr/dist/plyr.css" />
|
|
<script src="${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js"></script>`}
|
|
/>
|
|
|
|
## YouTube video
|
|
|
|
Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
|
|
|
|
<Example>
|
|
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
|
|
</Example>
|
|
|
|
## Vimeo file
|
|
|
|
For the Vimeo video you just need to change the `data-plyr-provider`.
|
|
|
|
<Example>
|
|
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
|
|
</Example>
|
|
|
|
## HTML5 video and audio
|
|
|
|
For a file you host yourself, use a normal `video` or `audio` element and let Plyr take it over. Keep the `controls` attribute, so the player still works if the script fails to load.
|
|
|
|
```html
|
|
<video id="player-video" controls playsinline poster="/media/clip-poster.jpg">
|
|
<source src="/media/clip.mp4" type="video/mp4" />
|
|
<track kind="captions" label="English" srclang="en" src="/media/clip.en.vtt" default />
|
|
</video>
|
|
```
|
|
|
|
```js
|
|
new Plyr('#player-video');
|
|
```
|
|
|
|
An audio player uses the same pattern with an `audio` element. See the [Plyr documentation](https://github.com/sampotts/plyr) for the full list of options.
|
|
|
|
## Customization
|
|
|
|
The Inline Player uses the primary color as the default color scheme. You can customize the player by modifying the CSS variables in your stylesheet. For example, to change the main color, you can add the following CSS:
|
|
|
|
```scss
|
|
--plyr-color-main: #ff0000; /* Change to your desired color */
|
|
```
|
|
|
|
For more customization options, refer to the [Customizing the CSS](https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css) section in the Plyr documentation.
|
|
|
|
## Accessibility
|
|
|
|
- Keep the native controls unless you build a full replacement. They are keyboard operable and already named in the user's language.
|
|
- Video needs captions. Add a `track` element with `kind="captions"`, and a transcript nearby for audio.
|
|
- Never autoplay with sound. If the player must start on its own, keep it muted and give users a visible way to stop it.
|
|
- Do not make a video the only source of an instruction. Anything essential belongs in text as well.
|