SP-FLAMINGO - SopPlayer Skin Integration

on

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



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
    <!--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>
    <!--Here is the JavaScript Library-->
</center>
</body>

</html>



Visit GitHub View Demo



Comments

Post a Comment