0.1.4 • Published 5 years ago
basic-video v0.1.4
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);
)