Camillycams.com – Today I tried several Players for HTML5 Video, finally found a pretty cool one, Plyr (stands for Player). Its features are almost like Youtube Videos.
This Plyr is actually more of a media player, because it’s not only HTML 5 Video, but Youtube Video, Vimeo and Audio. For the others I think it’s normal, because I’m more interested in the HTML 5 Player. Some of the features that I encountered include:
- Captions or Subtitles, unfortunately only supports files with the .vtt extension and does not support .srt
- We can enter several subtitles in various languages (in the demo video I included 3 languages). By default CC is OFF, please click CC to activate subtitles
- Quality, namely the quality of the video. We can display videos with different qualities. But of course it’s different from Youtube which is automatic. On Plyr we have to upload several videos with different qualities. Some video quality is only optional.
- Speed, or velocity. There are several playback speeds that we can choose
- Picture in Picture (PIP)
- and others…
How to use HTML5 video player
Save this external CSS above </head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/camillycams/assets@main/css/plyr.css" />then save the JavaScript above </body>
<script src="https://cdn.jsdelivr.net/gh/camillycams/assets@main/js/plyr.js"></script>
<script>
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
</script>HTML code to display Video
This is an example of writing HTML code that is stored in a post or page, don’t forget to add it class="js-player" pada video