A Free Video player with jQuery plugin with plyr is provide HTML5, YouTube and Vimeo player. it provide different-different resolution videos when switch to resolution. Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
Table of Contents
How to use :
Add source for java Script & CSS :
<link rel="stylesheet" type="text/css" href="plyr.css">
<script type="text/javascript" src="plyr.js"></script>
Add HTML element for HTML5 Video Player :
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
<!-- Captions are optional -->
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>
For HTML5 Audio :
<audio id="player" controls>
<source src="/path/to/audio.mp3" type="audio/mp3" />
<source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>
For YouTube player code :
<div class="plyr__video-embed" id="player">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
For Vimeo Player :
<div class="plyr__video-embed" id="player">
<iframe
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
Initialization with Script :
<script>
const player = new Plyr('#player');
</script>
Done
Thanks for make jQuery plugin is developed by sampotts For more Helpfull for users, please check the demo page or visit the official website.
