Skip to content

Instantly share code, notes, and snippets.

@superman-enamy

superman-enamy/index.html

Created July 31, 2023 16:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save superman-enamy/be412a0425ca86001d263cb505eaf697 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save superman-enamy/be412a0425ca86001d263cb505eaf697 to your computer and use it in GitHub Desktop.
Download ZIP
Video Player with 'plyr.js'
Raw
index.html
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<!-- Caption files -->
<!-- Fallback for browsers that don't support the <video> element -->
<a>Video Oynatılamıyor</a>
</video>
</div>
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<!-- Caption files -->
<!-- Fallback for browsers that don't support the <video> element -->
<a>Video Oynatılamıyor</a>
</video>
</div>
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
Raw
script.js
// Change the second argument to your options:
// https://github.com/sampotts/plyr/#options
var player = new Plyr('.container video', {
muted: false,
volume: 1,
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
});
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: 50px auto;
max-width: 500px;
}
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