Name: Sopplayer Integration - HTML5 Stylish Video Player
Rating: 1.3 (3065 reviews)
Author: sh20raj

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> <span>html</span><span>&gt;</span></span><span><span>&lt;</span><span>html</span> <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>  <span>&lt;</span><span>meta</span> <span>charset</span>=<span>"UTF-8"</span><span>&gt;</span></span><span>  <span>&lt;</span><span>meta</span> <span>name</span>=<span>"viewport"</span> <span>content</span>=<span>"width=device-width, initial-scale=1.0"</span><span>&gt;</span></span><span>  <span>&lt;</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>/&gt;</span></span><span>  <span>&lt;!--Here is the Css 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>  <span>&lt;</span><span>body</span><span>&gt;</span></span><span>    <span>&lt;</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>&gt;</span></span><span>      <span>&lt;!--Use class="sopplayer" and data-setup="{}" --&gt;</span></span><span>      <span>&lt;</span><span>source</span> <span>src</span>=<span>"sample.mp4"</span> <span>type</span>=<span>"video/mp4"</span> <span>/&gt;</span></span><span>    <span>&lt;/</span><span>video</span><span>&gt;</span></span><span>    <span>&lt;</span><span>script</span> <span>src</span>=<span>"https://rebrand.ly/SopPlayerJS"</span><span>&gt;&lt;/</span><span>script</span><span>&gt;</span></span><span>    <span>&lt;!--Here is the JavaScript 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>