Nek / solid-plyr

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

Home Page:https://solid-plyr.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

solid-plyr

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

Table of Contents

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 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} />
  );
}

Authors

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

Changelog

Changelog

License

MIT

About

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

https://solid-plyr.netlify.app/

License:MIT License


Languages

Language:CSS 92.2%Language:TypeScript 6.6%Language:JavaScript 1.0%Language:HTML 0.2%