A simple HTML5, YouTube and Vimeo player (Plyr) for SolidJS
NPM npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM
This library is available through the npm registry.
NPM
$ npm -i solid-plyr
Yarn
$ yarn add solid-plyr
Start using it by importing the library first.
const SolidPlyr = require('solid-plyr');
or
import { SolidPlyr } from 'solid-plyr';
The SolidPlyr component requires the following CSS for styling:
Using link tags
<link href="https://unpkg.com/solid-plyr@1.0.0/dist/esm/index.css.map" rel="stylesheet">
Using import
import 'solid-plyr/dist/esm/index.css.map';
Video playback using Solid Plyr Player
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 ( <SolidPlyr source={SOURCE} options={OPTIONS} /> ); }
Uncontrolled Solid Plyr Player
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 ( <UncontrolledSolidPlyr ref={setRef} /> ); }
Play YouTube Videos using Solid Plyr
import { SolidPlyr } from 'solid-plyr'; const SOURCE = { type: 'video', sources: [ { src: 'yWtFb9LJs3o', provider: 'youtube' } ] } const OPTIONS = { // ... } export default function Player() { return ( <SolidPlyr source={SOURCE} options={OPTIONS} /> ); }
Play Vimeo Videos using Solid Plyr
import { SolidPlyr } from 'solid-plyr'; const SOURCE = { type: 'video', sources: [ { src: 'https://vimeo.com/533559247', provider: 'vimeo' } ] } const OPTIONS = { // ... } export default function Player() { return ( <SolidPlyr source={SOURCE} options={OPTIONS} /> ); }
Video Playback with HLS using Solid Plyr
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 ( <SolidHlsPlyr source={SOURCE} options={OPTIONS} /> ); }
Uncontrolled Video Playback with HLS using Solid Plyr
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 ( <UncontrolledSolidPlyr ref={setRef} /> ); }
Video Playback with Dash using Solid Plyr
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 ( <SolidDashPlyr source={SOURCE} options={OPTIONS} /> ); }
Uncontrolled Video Playback with Dash using Solid Plyr
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 ( <UncontrolledSolidPlyr ref={setRef} /> ); }
- Prince Neil Cedrick Castro - Initial work
See also the list of contributors who participated in this project.