Skip to main content

Insert a HTML5 video player to your website's simple video's (https://plyr.io) Dynamic Video Player

 


See Demo :- https://plyrvideo.sh20raj.repl.co/


    
    <!-- Docs styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" />

    



    
<!--Add a Simple HTML5 Video tag-->
<div id="container">
        <video
          controls
          data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
          id="player"
        >
          <!-- Video files -->
          <source
            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
            type="video/mp4"
            size="576"
          />
          <source
            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
            type="video/mp4"
            size="720"
          />
          <source
            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
            type="video/mp4"
            size="1080"
          />

          <!-- Caption files -->
          <track
            kind="captions"
            label="English"
            srclang="en"
            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
            default
          />
          <track
            kind="captions"
            label="Français"
            srclang="fr"
            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
          />

          <!-- Fallback for browsers that don't support the <video> element -->
          <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
        </video>
      </div>
    



    
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.js"></script>


See Demo :-

</body>



Labels:

Comments

Deyaa Adam said…
Hi, How can I remove the preview image in the seek bar? (I don't need image I just need the time)
May 5, 2021 at 4:21 PM
∅ ÜÑKÑØWN said…
Skinnig Video
Chats During Video Making ...


Skinnig of Plyr.io Video Player with Css - Simple Mode

You can see this video that how to integrate plyr video player...

Let's do this in another way...

Firstly Setup our player...
- Adding Plyr.io to it...


The previous way was direct...

Let use this way or watever you want...
See All Documentation on GitHub All Links are in Description Section...

See Diffrent methods of Integrationg plyr here..
It's Integrated Now...

You can also change the document object as you want... (instead of id="player")


Now, It's Skinning Time...

- We will change the color of player...

Here is the list of variables you can see and change...

For Example -
--plyr-color-main is for changing the main color...

You can see ui color is Changed...


You can See the whole caa variable list from here...
and Customize your Player...

You can also do same things on plyr audio...


Thanks For Watching till Last...
/
/
/
/

/









May 13, 2021 at 12:59 AM
Post a Comment

Popular posts from this blog

FamilyAlbum - Free Unlimited Storage - Share Family Photos and Videos - Auto-Organized Album

Website :- https://family-album.com Play Store :- https://play.google.com/store/apps/details?id=us.mitene Description from Play Store The best way to safely share and organize your family’s photos and videos. Unlimited storage, no ads, and it’s free! 3 Reasons to Start Your Album: 1) You’ll love it YOUR MEMORIES ON DISPLAY. Show off your photos and videos in a way that’s both beautiful and intuitive. Everything is automatically sorted by month, complete with your child’s age. Just swipe the screen to go back in time! UNLIMITED STORAGE. Back up all your memories for free. STREAMLINED SHARING. No more sharing the same photo with five different group chats. All your photos, all your videos, all your favorite people, all in one place. YOUR PRIVACY IS OUR PRIORITY. Your album is completely private. All content you upload to the app belongs to you, and it can only be viewed by you and the family and friends you invite. That also ...
Post a Comment
Read more

Git Conflict Guide 🚀

What is a Git Conflict? A Git conflict occurs when two branches have changed the same part of a file, and Git cannot automatically merge the changes. When you attempt to merge or rebase branches, Git will pause the process and mark the conflicted files. Steps to Resolve a Git Conflict 1. Identify Conflicted Files When you encounter a conflict, Git will mark the conflicted files. You can see these files by running: git status Enter fullscreen mode Exit fullscreen mode 2. Open the Conflicted File Open the conflicted file(s) in your code editor. You'll see Git's conflict markers: <<<<<<< HEAD Your changes ======= Incoming changes >>>>>>> branch-name Enter fullscreen mode Exit fullscreen mode <<<<<<< HEAD marks the beginning of your changes. ======= separates your changes...
Post a Comment
Read more

Random Posts