SP-FLAMINGO - SopPlayer Skin Integration - Custom Video Player

Sh Raj - Jan 13 '22 - - Dev Community

Documentation Video :- https://www.youtube.com/watch?v=DOxtPWfKWUY

Demo Website :- https://sopplayer.sh20raj.repl.co/flamingo

View on Repl.it :- https://replit.com/@SH20RAJ/SopPlayer#flamingo

[GitHub](https://github.com/SH20RAJ/Sopplayer/tree/main/flamingo) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu0stgqfkzq1j2kc5qvb.png)

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>
Enter fullscreen mode Exit fullscreen mode

3 . Add the JavaScript CDN only before </body> Tag


HERE IS THE JAVASCRIPT CDN

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script>
    <!--Here is the JavaScript Library-->
Enter fullscreen mode Exit fullscreen mode

Here you have completed your Sopplayer-Flamingo Intgretion.

**Before Sopplayer** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zrk1s7wleea2v78vdd0.JPG) **After Sopplayer** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2488umn4p1gvxeh2v35b.PNG)

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>
    <script src="https://cdn.jsdelivr.net/gh//SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script>
    <!--Here is the JavaScript Library-->
</center>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
## **Visit [GitHub](https://github.com/SH20RAJ/sp-flamingo) View [Demo](https://sopplayer.sh20raj.repl.co/flamingo/)** ** See Articles :- --- https://codexdindia.blogspot.com/2021/02/sp-flamingo-sopplayer-skin-integration.html --- https://dev.to/sh20raj/sp-flamingo-sopplayer-skin-integration-custom-video-player-4675/ **
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .