Sopplayer Integration - HTML5 Stylish Video Player
See All SopProducts :- https://sh20raj.github.io/SopProducts/
 |
| Sopplayer Screenshot |
See Video Documentation :- [https://youtu.be/Tmj2QOXE6EU](https://youtu.be/Tmj2QOXE6EU)
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://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" /> <!--Here is the Css Library-->
4. Add the Javascript CDN before </body> Tag
HERE IS THE JAVASCIPT CDN<script src="https://rebrand.ly/SopPlayerJS"></script> <!--Here is the JavaScript Library-->
Here you have completed your Sopplayer Intgretion.
Before Sopplayer
 |
| Before Sopplayer |
After Sopplayer
 |
| After Sopplayer |
<span>SEE
HOW FULL HTML WILL LOOK LIKE</span>
<pre><span><span><!</span><span>DOCTYPE</span> <span>html</span><span>></span></span><span><span><</span><span>html</span> <span>lang</span>=<span>"en"</span><span>></span></span><span><br></span><span><span><</span><span>head</span><span>></span></span><span> <span><</span><span>meta</span> <span>charset</span>=<span>"UTF-8"</span><span>></span></span><span> <span><</span><span>meta</span> <span>name</span>=<span>"viewport"</span> <span>content</span>=<span>"width=device-width, initial-scale=1.0"</span><span>></span></span><span> <span><</span><span>link</span> <span>href</span>=<span>"https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css"</span> <span>rel</span>=<span>"stylesheet"</span> <span>/></span></span><span> <span><!--Here is the Css Library--></span></span><span><span></</span><span>head</span><span>></span></span><span><span><</span><span>center</span><span>></span></span><span> <span><</span><span>body</span><span>></span></span><span> <span><</span><span>video</span> <span>id</span>=<span>"my-video"</span> <span>class</span>=<span>"sopplayer"</span> <span>controls</span> <span>preload</span>=<span>"auto"</span> <span>data-setup</span>=<span>"{}"</span> <span>width</span>=<span>"500px"</span><span>></span></span><span> <span><!--Use class="sopplayer" and data-setup="{}" --></span></span><span> <span><</span><span>source</span> <span>src</span>=<span>"sample.mp4"</span> <span>type</span>=<span>"video/mp4"</span> <span>/></span></span><span> <span></</span><span>video</span><span>></span></span><span> <span><</span><span>script</span> <span>src</span>=<span>"https://rebrand.ly/SopPlayerJS"</span><span>></</span><span>script</span><span>></span></span><span> <span><!--Here is the JavaScript Library--></span></span><span><span></</span><span>center</span><span>></span></span><span><span></</span><span>body</span><span>></span></span><span><br></span><span><span></</span><span>html</span><span>></span></span></pre>
Top comments (0)