covered-video-player

An HTML5 video player with any HTML superimposed as a play button.

Example

Install

npm install covered-video-player

OR

yarn add covered-video-player

Usage

Example:

import CoveredVideoPlayer from 'covered-video-player';

new CoveredVideoPlayer({ // Props.
	selector: '#video-container'
	src: [
		{
			url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
			type: 'video/mp4',
		},
	],
	cover: `<div class="cover">
		<h1>This is the cover.</h1>
		<h2>Play</h2>
	</div>`,
});

props

| Key | Type | Description | Required/Default | | ------------------- | ------ | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | selector | string | A selector to pass to querySelector. | required | | src | array | An array of objects used to build HTML source elements. Required keys for each object are url and type. | required | | controls | bool | Show controls on the video? | default true | | loop | bool | Make the video loop when played? | default false | | muted | bool | Mute the video? | default true | | cover | string | A string representation of HTML to use as the video cover. | default The innerHTML of the element selected by selector | | fallbackCover | string | A string representation of HTML to use if rendering fails. | default '' | | coverClass | string | A CSS class to apply to the cover. | default CoveredVideoPlayer__cover | | videoContainerClass | string | A CSS class to apply to the div holding the video. | default CoveredVideoPlayer__video |

To-do height, width, onPlay, onPause, minWindowWidth,