Webplayer para bigradio.cl

index.html

<div class="container">
	<video id="playerbig" autoplay controls crossorigin poster="https://bigradio.cl/wp-content/uploads/2018/10/thumbnail-player.jpg"></video>
</div>

<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>

script.babel

document.addEventListener('DOMContentLoaded', () => {
	const source = 'https://unlimited1-cl.dps.live/bigradio/bigradio.smil/bigradio/livestream1/chunks.m3u8';
	const video = document.querySelector('#playerbig');
	const player = new Plyr('#playerbig', {
    title: 'Big Radio',
		volume: '0.5',
		controls: ['play-large', 'play', 'mute', 'volume', 'captions', 'pip', 'airplay', 'fullscreen'],
});
	
	if (!Hls.isSupported()) {
		video.src = source;
	} else {
		// For more Hls.js options, see https://github.com/dailymotion/hls.js
		const hls = new Hls();
		hls.loadSource(source);
		hls.attachMedia(video);
		window.hls = hls;
		
		// Handle changing captions
		player.on('languagechange', () => {
			// Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
			setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
		});
	}
	
	// Expose player so it can be used from the console
	window.player = player;
});

scripts

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"></script>
<script src="https://unpkg.com/plyr@3"></script>

style.css

.container {
	margin: 20px auto;
	width: 600px;
}
video {
	width: 100%;
}

styles

<link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet" />

wnndjvl.markdown

Webplayer para bigradio.cl

A Pen by Matías Yáñez ⭐☄️ on CodePen.

License.