Skip to content

Instantly share code, notes, and snippets.

@matiasweb

matiasweb/index.html

Last active December 23, 2021 08:12
Show Gist options
  • Save matiasweb/96d2b21a9639037c979b42f7dbd5b907 to your computer and use it in GitHub Desktop.
Save matiasweb/96d2b21a9639037c979b42f7dbd5b907 to your computer and use it in GitHub Desktop.
Download ZIP
Webplayer para bigradio.cl
Raw
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>
Raw
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;
});
Raw
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>
Raw
style.css
.container {
margin: 20px auto;
width: 600px;
}
video {
width: 100%;
}
Raw
styles
<link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment