Basic Video

A simple and consistent API for web video playback

Supports all default features for <video> and <audio> tags, with some additional functionality.

This repo exists solely as an API layer around the default HTMLMediaElement. It's sole purpose is to provide basic video playback for a developer to create their own custom video player.

To see a sample of the api with custom controls. Check out the basic-video-player repository.

Getting Started

npm install basic-video

<video id="player" preload="auto" controls>

MP4

import BasicVideo from 'basic-video';

const basicVideo = new BasicVideo(document.getElementById('player'), {
    poster: 'https://d292x7cpdimrbp.cloudfront.net/video/poster.jpg',
    sources: [
        {
            src: 'https://d292x7cpdimrbp.cloudfront.net/video/1080.mp4',
            type: 'video/mp4',
            label: '1080'
        },
        {
            src: 'https://d292x7cpdimrbp.cloudfront.net/video/720.mp4',
            type: 'video/mp4',
            label: '720'
        },
        {
            src: 'https://d292x7cpdimrbp.cloudfront.net/video/480.mp4',
            type: 'video/mp4',
            label: '480'
        },
    ],
});

HLS

import BasicVideo from 'basic-video';

const basicVideo = new BasicVideo(document.getElementById('player'), {
    poster: 'https://d292x7cpdimrbp.cloudfront.net/video/poster.jpg',
    hlsManifestUrl: 'https://d292x7cpdimrbp.cloudfront.net/video/video.m3u8',
});

Getters/Setters

//Get
const currentTime = basicVideo.currentTime;

//Set
basicVideo.currentTime = 30;

| Prop | Type | Get | Set | Info | |------------------------|-----------|-----|-----|------| | currentSource | String | x | x | Current media source being played | poster | String | x | x | Poster on the video element | currentVolume | Number | x | x | Current volume of the media | buffered | Object | x | | TimeRanges object (buffered.start(0) and buffered.end(0) to get the range) | isMuted | Boolean | x | x | Mute the player | isReady | Boolean | x | | Can the media play through without interruption | readyState | Number | x | | MDN | totalDuration | Number | x | | Total duration of the media in seconds | currentTime | Number | x | x | The current time of the media in seconds | currentProgress | Number | x | | The current progress percentage of the media | playbackRate | Number | x | x | The playback rate of the media (1 for normal, 0.5 for half etc...) | playbackQualities | Array | x | | An array of all available qualities with their label and source | currentPlaybackQuality | Number | x | x | Current index of the playbackQualities array

Methods

basicVideo.play();

| Method | Params | Returns | Info | |----------------------|----------------------|---------|------| | init | | Promise | Initialize the player with existing props (invoked in the constructor). Can be used to refresh the player if you want | forceLoad | | Promise | Forces the player to reload the media, returns a promise that resolves when the isReady prop returns true. Times itself out after 5 minutes. | play | | | Play the media | pause | | | Pause the media | loadHlsJs (static) | | | Create a script element with the latest version of hls.js | attachHls | manifest (string) | | Attach an instance of hls.js to the video element with am HLS Manifest URL

Events

All events are emit from the MediaElement object (the <video> element you injected into the player).

| Event | Info | |----------------------|----------------------| | init | emit after the init function resolves

You can also hook into all of the DOM Events available to the HTMLMediaElement

basicVideo.MediaElement.addEventListener('play' => event {
    console.log(event);
)