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

Making AI Song Covers with RVC - Google Colab

Making AI Song Covers with RVC * Google Colab or Local Install These are the two main options for making AI song covers. You can run RVC on your computer if you have a PC with a decent NVIDIA graphics card (GPU), or you can run it for free through the Google Colab web page. Running Google Colab This is the recommended Google Colab for using voice models: https://colab.research.google.com/drive/1Gj6UTf2gicndUW_tVheVhTXIIYpFTYc7?usp=sharing After enough time, Google limits your GPU usage and you have to wait to use the GPU again. This will slow down your conversion speeds, but it will still be usable as long as you use ‘rmvpe’ mode (considered to be the general best mode, tied with mangio-crepe). ~3 minute song took 9 minutes for me without the GPU. Some people make alternate Google accounts to get around the GPU limits, or they pay for Colab Pro. Most commonly happens for people training their own voices since that requires a lot of GPU power. Running Locally Check...
Post a Comment
Read more

Random Posts