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