Streamio-player is a video player with dash and hls support, extended from plyr.io [Checkout the demo] ()

Features

• 📺 supports adaptive streaming formats (HLS ans Dash)
• ✂️ Double tab to seek with animation

Quick setup

HTML

Streamio-Player extends upon plyr.io [ Customable Video Player ] (https://plyr.io)

HTML5 video

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

Note: Source shouldn't be rendered via markup but with js

JavaScript

You can use Plyr as an module as follows:

import { Player } from "streamio-player";

// check plyr.io documentations for available options
const player = new Player("#player", options=null, callback=null);

player.source = [
    {
        type: String, // mpd
        url: String
    },
    {
        type: String, // mp4
        variants: [
            {
                size: Number, // 720
                url: String
            }
        ]
    }
];

Alternatively you can include the plyr.js script before the closing </body> tag and then in your JS create a new instance of Plyr as below.

<script src="path/to/streamio-player.js"></script>
<script>
    const player = new Player("#player", options=null, callback=null);
</script>

Getters and Setters

Example setters:

const plyr = player.plyr; // gets plyrio instance can be null when not finished initializing make sure yoo access this in callback only 
plyr.rewind(10000);

| Option | Type | Default | | | -------------------- | -------------------------- | --------------| | options | Object | null | | callback | Function | false | | sources | Array | [] | | plyr | Object | null |