vLitejs - HTML5 video

HTML5 provider

by yoriiis

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vlitejs@5/dist/vlite.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vlitejs@5/dist/plugins/subtitle.css">
<script src="https://cdn.jsdelivr.net/npm/vlitejs@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vlitejs@5/dist/plugins/subtitle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vlitejs@5/dist/plugins/pip.js"></script>
<video crossorigin id="player" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5.mp4">
	<track label="English" kind="subtitles" srclang="en" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-en.vtt" default />
	<track label="French" kind="subtitles" srclang="fr" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-fr.vtt" default />
</video>

JavaScript

Vlitejs.registerPlugin('subtitle', VlitejsSubtitle);
Vlitejs.registerPlugin('pip', VlitejsPip);

new Vlitejs('#player', {
	options: {
		controls: true,
		autoplay: false,
		playPause: true,
		progressBar: true,
		time: true,
		volume: true,
		fullscreen: true,
		poster: 'https://yoriiis.github.io/cdn/static/vlitejs/demo-poster.jpg',
		bigPlay: true,
		playsinline: true,
		loop: false,
		muted: false,
		autoHide: true
  	},
	plugins: ['subtitle', 'pip'],
	onReady: function (player) {
 		console.log(player)

		player.on('play', () => console.log('play'))
		player.on('pause', () => console.log('pause'))
		player.on('progress', () => console.log('progress'))
		player.on('timeupdate', () => console.log('timeupdate'))
		player.on('volumechange', () => console.log('volumechange'))
		player.on('enterfullscreen', () => console.log('enterfullscreen'))
		player.on('exitfullscreen', () => console.log('exitfullscreen'))
		player.on('enterpip', () => console.log('enterpip'))
		player.on('leavepip', () => console.log('leavepip'))
		player.on('trackenabled', () => console.log('trackenabled'))
		player.on('trackdisabled', () => console.log('trackdisabled'))
		player.on('ended', () => console.log('ended'))
  	}
});