Sopplayer Integration — HTML5 Stylish Video Player
See Demo :- https://codexdindia.blogspot.com/2020/12/sopplayer-integration-html5-stylish.html
Sopplayer Screenshot
See Video Documentation : -
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" class="sopplayer" controls preload="auto" data-setup="{}" width="500px"><!--Use class="sopplayer" and data-setup="{}" --><source src="sample.mp4" type="video/mp4" /></video>
3. Add the Css CDN before </head> Tag .
HERE IS THE CSS CDN
<link href="https://ghcdn.rawgit.org/SH20RAJ/Sopplayer/main/sopplayer.css" rel="stylesheet" /><!--Here is the Css Library-->
4. Add the Javascript CDN before </body> Tag
HERE IS THE JAVASCRIPT CDN
<script src="https://ghcdn.rawgit.org/SH20RAJ/Sopplayer/main/sopplayer.js"></script><!--Here is the JavaScript Library-->
Here you have completed your Sopplayer Intgretion.
Before Sopplayer
Before Sopplayer
After Sopplayer
After Sopplayer
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"><link href="https://ghcdn.rawgit.org/SH20RAJ/Sopplayer/main/sopplayer.css" rel="stylesheet" /><!--Here is the Css Library--></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://ghcdn.rawgit.org/SH20RAJ/Sopplayer/main/sopplayer.js"></script><!--Here is the JavaScript Library--></center></body></html>
