Created
September 26, 2020 18:44
-
-
Save captproton/7d756429d342affc968f726560570ff0 to your computer and use it in GitHub Desktop.
Plyr Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> | |
<!-- Video files --> | |
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576"> | |
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720"> | |
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080"> | |
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440"> | |
<!-- Caption files --> | |
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" | |
default> | |
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"> | |
<!-- Fallback for browsers that don't support the <video> element --> | |
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a> | |
</video> | |
<div class="actions"> | |
<button type="button" class="btn js-play">Play</button> | |
<button type="button" class="btn js-pause">Pause</button> | |
<button type="button" class="btn js-stop">Stop</button> | |
<button type="button" class="btn js-rewind">Rewind</button> | |
<button type="button" class="btn js-forward">Forward</button> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener('DOMContentLoaded', () => { | |
// This is the bare minimum JavaScript. You can opt to pass no arguments to setup. | |
const player = new Plyr('#player'); | |
// Expose | |
window.player = player; | |
// Bind event listener | |
function on(selector, type, callback) { | |
document.querySelector(selector).addEventListener(type, callback, false); | |
} | |
// Play | |
on('.js-play', 'click', () => { | |
player.play(); | |
}); | |
// Pause | |
on('.js-pause', 'click', () => { | |
player.pause(); | |
}); | |
// Stop | |
on('.js-stop', 'click', () => { | |
player.stop(); | |
}); | |
// Rewind | |
on('.js-rewind', 'click', () => { | |
player.rewind(); | |
}); | |
// Forward | |
on('.js-forward', 'click', () => { | |
player.forward(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is purely for the demo */ | |
.container { | |
max-width: 800px; | |
margin: 0 auto; | |
} | |
.plyr { | |
border-radius: 4px; | |
margin-bottom: 15px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdn.plyr.io/3.4.6/plyr.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment