SP-FLAMINGO SopPlayer Skin Integration
See Demo :- https://sopplayer.sh20raj.repl.co/flamingo/
Demo Website :- https://sopplayer.github.io/SP-FLAMINGO/
or https://sopplayer.sh20raj.repl.co/flamingo
View on Repl.it :- https://replit.com/@SH20RAJ/SopPlayer#flamingo
Steps to Import :-
Steps :-
1. Use class="sopplayer" in Your <video> Tag .
2. And Add data-setup="{}", attribute like this .
HERE IS THE FULL VIDEO CODE
<video id="my-video" poster="https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg"class="sopplayer" controls preload="auto" data-setup="{}" width="500px"><!--Use class="sopplayer" and data-setup="{}" --><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4" /></video>
3. Add the Javascript CDN only before </body> Tag
HERE IS THE JAVASCRIPT CDN
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script><!--Here is the JavaScript Library-->
Here you have completed your Sopplayer-Flamingo Intgretion.
Before Sopplayer
 |
| Before Sopplayer |
 |
| After Sp-Flamingo |
SEE HOW FULL HTML WILL LOOK LIKE
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><center><body><video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px"><!--Use class="sopplayer" and data-setup="{}" --><source src="sample.mp4" type="video/mp4" /></video><script src="https://cdn.jsdelivr.net/gh//SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script><!--Here is the JavaScript Library--></center></body></html>
Comments
Post a Comment