Sopplayer Integration - HTML5 Stylish Video Player

#html5videoplayer #sh20raj #videojsskin #sopplayer

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

After Sopplayer

After Sopplayer

      <span>SEE
          HOW FULL HTML WILL LOOK LIKE</span>


      <pre><span><span>&lt;!</span><span>DOCTYPE</span>&nbsp;<span>html</span><span>&gt;</span></span><span><span>&lt;</span><span>html</span>&nbsp;<span>lang</span>=<span>"en"</span><span>&gt;</span></span><span><br></span><span><span>&lt;</span><span>head</span><span>&gt;</span></span><span>&nbsp;&nbsp;<span>&lt;</span><span>meta</span>&nbsp;<span>charset</span>=<span>"UTF-8"</span><span>&gt;</span></span><span>&nbsp;&nbsp;<span>&lt;</span><span>meta</span>&nbsp;<span>name</span>=<span>"viewport"</span>&nbsp;<span>content</span>=<span>"width=device-width,&nbsp;initial-scale=1.0"</span><span>&gt;</span></span><span>&nbsp;&nbsp;<span>&lt;</span><span>link</span>&nbsp;<span>href</span>=<span>"https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css"</span>&nbsp;<span>rel</span>=<span>"stylesheet"</span>&nbsp;<span>/&gt;</span></span><span>&nbsp;&nbsp;<span>&lt;!--Here&nbsp;is&nbsp;the&nbsp;Css&nbsp;Library--&gt;</span></span><span><span>&lt;/</span><span>head</span><span>&gt;</span></span><span><span>&lt;</span><span>center</span><span>&gt;</span></span><span>&nbsp;&nbsp;<span>&lt;</span><span>body</span><span>&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;</span><span>video</span>&nbsp;<span>id</span>=<span>"my-video"</span>&nbsp;<span>class</span>=<span>"sopplayer"</span>&nbsp;<span>controls</span>&nbsp;<span>preload</span>=<span>"auto"</span>&nbsp;<span>data-setup</span>=<span>"{}"</span>&nbsp;<span>width</span>=<span>"500px"</span><span>&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;!--Use&nbsp;class="sopplayer"&nbsp;and&nbsp;data-setup="{}"&nbsp;--&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;</span><span>source</span>&nbsp;<span>src</span>=<span>"sample.mp4"</span>&nbsp;<span>type</span>=<span>"video/mp4"</span>&nbsp;<span>/&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;/</span><span>video</span><span>&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;</span><span>script</span>&nbsp;<span>src</span>=<span>"https://rebrand.ly/SopPlayerJS"</span><span>&gt;&lt;/</span><span>script</span><span>&gt;</span></span><span>&nbsp;&nbsp;&nbsp;&nbsp;<span>&lt;!--Here&nbsp;is&nbsp;the&nbsp;JavaScript&nbsp;Library--&gt;</span></span><span><span>&lt;/</span><span>center</span><span>&gt;</span></span><span><span>&lt;/</span><span>body</span><span>&gt;</span></span><span><br></span><span><span>&lt;/</span><span>html</span><span>&gt;</span></span></pre>