Skip to main content

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button




Integration :- 

or Get Plyr CDNS From CDNJS Plyr
    
<!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" />
or Use CDNJS for CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.css" />

<!--Add a Simple HTML5 Video tag-->
  <video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="vid1">
    <!-- Video files -->
    <source src="https://rebrand.ly/sample-video" type="video/mp4" size="576" />
  </video>

<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.js"></script>

<script>
  const player = new Plyr('.vid1');
</script>


    
Skin Customising


Links :- 
    Plyr.io Website :- https://plyr.io/
    GitHub & Documentation :- https://github.com/sampotts/plyr#html

Go To GitHub Link and See the readme.md for the documentation.


See All Classes Here :- Customizing With Css


Adding Download Button
    
  var controls =
[
    'play-large', // The large play button in the center
    'restart', // Restart playback
    'rewind', // Rewind by the seek time (default 10 seconds)
    'play', // Play/pause playback
    'fast-forward', // Fast forward by the seek time (default 10 seconds)
    'progress', // The progress bar and scrubber for playback and buffering
    'current-time', // The current time of playback
    'duration', // The full duration of the media
    'mute', // Toggle mute
    'volume', // Volume control
    'captions', // Toggle captions
    'settings', // Settings menu
    'pip', // Picture-in-picture (currently Safari only)
    'airplay', // Airplay (currently Safari only)
    'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
    'fullscreen' // Toggle fullscreen
];

var player = new Plyr('#player', { controls });
  

    
Add this code to get All Player Controls. Add or Remove Controls From the Array to See the controls.


Comments

  1. https://smovie99.blogspot.com/2021/06/var-controls-play-large-large-play_14.html

    check this out can u help me ?

    ReplyDelete
    Replies
    1. Can you please tell me the template u use and also the link to it.

      Delete
    2. what i do if I want to publish my video file in it which link should I replace

      Delete
  2. The subtitles don't work. Can you fix it please?

    ReplyDelete
  3. Awesome work, I love your projects and what you do but unfortunately the translation is not working even if we have the latest version plyr.io cdns

    Could you please fix this issue?

    Have a nice day,

    ReplyDelete
    Replies
    1. Can You explain Further...
      Contact me on Telegram...

      Delete

    2. Hi,

      All the options are working properly, but when I click on captions to display the subtitles in plyr, it doesn't appear even though i inserted the .vtt link of the movie, here is the code I inserted in my blogpost :

      https://anotepad.com/notes/6bnsey2y


      I don't have a relegram account, only facebook and instagram and i hope you will find a solution to this issue.


      Have a nice week,

      Delete
  4. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Random Posts