Neuron Powered Motorization

    solid-plyr
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    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

    Install

    npm i solid-plyr

    DownloadsWeekly Downloads

    28

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    640 kB

    Total Files

    67

    Last publish

    Collaborators

    • princedev