https://github.com/git-ced/solid-plyr
A simple HTML5, YouTube, and Vimeo player (Plyr) for SolidJS
https://github.com/git-ced/solid-plyr
hacktoberfest plyr solid-js
Last synced: 10 months ago
JSON representation
A simple HTML5, YouTube, and Vimeo player (Plyr) for SolidJS
- Host: GitHub
- URL: https://github.com/git-ced/solid-plyr
- Owner: git-ced
- License: mit
- Created: 2021-09-27T14:33:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-07T23:52:26.000Z (over 4 years ago)
- Last Synced: 2025-04-17T19:17:38.289Z (10 months ago)
- Topics: hacktoberfest, plyr, solid-js
- Language: CSS
- Homepage: https://solid-plyr.netlify.app/
- Size: 1.14 MB
- Stars: 28
- Watchers: 2
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-plyr
> A simple HTML5, YouTube and Vimeo player (Plyr) for SolidJS
[](https://www.npmjs.com/package/solid-plyr)
## Table of Contents
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Authors](#authors)
- [Changelog](#changelog)
- [License](#license)
## Installation
This library is available through the [npm registry](https://www.npmjs.com/).
NPM
```bash
$ npm -i solid-plyr
```
Yarn
```bash
$ yarn add solid-plyr
```
## Setup
Start using it by importing the library first.
### CommonJS
```javascript
const SolidPlyr = require('solid-plyr');
```
or
### ES6
```javascript
import { SolidPlyr } from 'solid-plyr';
```
The `SolidPlyr` component requires the following CSS for styling:
**Using link tags**
```html
```
**Using import**
```javascript
import 'solid-plyr/dist/esm/index.css.map';
```
## Usage
**Video playback using Solid Plyr Player**
```javascript
import { SolidPlyr } from 'solid-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
type: 'video/mp4',
size: 720,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
type: 'video/mp4',
size: 1080,
}
]
}
const OPTIONS = {
autoplay: true,
muted: true,
}
export default function Player() {
return (
);
}
```
**Uncontrolled Solid Plyr Player**
```javascript
import { UncontrolledSolidPlyr, createPlyr } from 'solid-plyr';
import { createEffect } from 'solid-js';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = createPlyr({
source: SOURCE,
options: OPTIONS,
});
createEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', (event) => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
**Play YouTube Videos using Solid Plyr**
```javascript
import { SolidPlyr } from 'solid-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'yWtFb9LJs3o',
provider: 'youtube'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Play Vimeo Videos using Solid Plyr**
```javascript
import { SolidPlyr } from 'solid-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://vimeo.com/533559247',
provider: 'vimeo'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Video Playback with HLS using Solid Plyr**
```javascript
import { SolidHlsPlyr } from 'solid-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src:
'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
type: 'application/x-mpegURL'
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Uncontrolled Video Playback with HLS using Solid Plyr**
```javascript
import { UncontrolledSolidPlyr, createHlsPlyr } from 'solid-plyr';
import { createEffect } from 'solid-js';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = createHlsPlyr({
source: SOURCE,
options: OPTIONS,
});
createEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', (event) => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
**Video Playback with Dash using Solid Plyr**
```javascript
import { SolidDashPlyr } from 'solid-plyr';
const SOURCE = {
type: 'video',
sources: [
{
src: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
type: 'application/dash+xml',
}
]
}
const OPTIONS = {
// ...
}
export default function Player() {
return (
);
}
```
**Uncontrolled Video Playback with Dash using Solid Plyr**
```javascript
import { UncontrolledSolidPlyr, createDashPlyr } from 'solid-plyr';
import { createEffect } from 'solid-js';
const SOURCE = {
// ...
}
const OPTIONS = {
// ...
}
export default function Player() {
const [ref, setRef] = createDashPlyr({
source: SOURCE,
options: OPTIONS,
});
createEffect(() => {
const player = ref()?.plyr;
if (player) {
player.on('timeupdate', (event) => {
// Log current time while playing the playback
console.log(event.detail.plyr.currentTime);
});
}
})
return (
);
}
```
## Authors
- [Prince Neil Cedrick Castro](https://github.com/git-ced/) - Initial work
See also the list of [contributors](https://github.com/git-ced/solid-plyr/contributors) who participated in this project.
## Changelog
[Changelog](https://github.com/git-ced/solid-plyr/releases)
## License
[MIT](LICENSE)