Accessible Customizable HTML5, YouTube And Vimeo Player Plugin – plyr

Other
File Size: 31.46 KB
Views Total: 2772 views
Last Update:March 19, 2024
Publish Date: February 14, 2015
Official Website: Go to website
License: MIT
Plugin Author: sampotts
Demo    Download

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.

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&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;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&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;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.
List Of Version :
  • v3.7.8
  • v3.7.7
  • v3.7.6
  • v3.7.5
  • v3.7.4
  • v3.7.3
  • v3.7.2
  • v3.7.1
  • v3.7.0
  • v3.6.12
  • v3.6.11
  • v3.6.10
  • v3.6.9
  • v3.6.8
  • v3.6.7
  • v3.6.6
  • v3.6.5
  • v3.6.4
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.5.10
  • v3.5.9
  • v3.5.8
  • v3.5.7
  • v3.5.6
  • v3.5.5
  • v3.5.4
  • v3.5.3
  • v3.5.2

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.