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>



Comments

  1. Hi, How can I remove the preview image in the seek bar? (I don't need image I just need the time)

    ReplyDelete
  2. 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...
    /
    /
    /
    /

    /









    ReplyDelete

Post a Comment

Random Posts