Simple video example

by Ea Bangalore

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.3/plyr.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.3/plyr.js"></script>
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video -->

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video controls
    id="plyr-video"
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="620"
    playsinline>

Sorry, your browser doesn't support embedded videos, 
but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a> 
and watch it with your favorite video player!

</video>

JavaScript

const player = new Plyr('#plyr-video', {
  controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
  autoplay: true,
  loop: { active: true },
  invertTime: false,
  volume: 0,
  muted: true
});

player.on('timeupdate enterfullscreen exitfullscreen', event => console.log(event.type));