solid-plyr

solid-plyr

A simple HTML5, YouTube and Vimeo player (Plyr) for SolidJS

Table of Contents

• Installation
• Setup
• Usage
• Authors
• Changelog
• License

Installation

This library is available through the npm registry.

NPM

$ npm -i solid-plyr

Yarn

$ yarn add solid-plyr

Setup

Start using it by importing the library first.

CommonJS

const SolidPlyr = require('solid-plyr');

or

ES6

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';

Usage

Video playback through Solid Plyr Player

import { SolidPlyr } from 'solid-plyr';

const SOURCES = [
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
    type: 'application/x-mpegURL',
  },
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
    type: 'application/dash+xml',
  }
];

export default function Player() {
  return (
    <SolidPlyr sources={SOURCES} autoplay="muted" />
  );
}

Uncontrolled Solid Plyr Player

import { UncontrolledSolidPlyr, createPlayer } from 'solid-plyr';

const SOURCES = [
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
    type: 'application/x-mpegURL',
  },
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
    type: 'application/dash+xml',
  }
];

export default function Player() {
  const { ref } = createPlayer({ 
    sources: SOURCES,
    muted: true,
  });

  return (
    <UncontrolledSolidPlyr playerRef={SOURCES} />
  );
}

Authors

• Prince Neil Cedrick Castro - Initial work

See also the list of contributors who participated in this project.

Changelog

Changelog

License

MIT