Skip to main content

Sopplayer Integration - HTML5 Stylish Video Player

Sopplayer Integration - HTML5 Stylish Video Player


See Demo :- 

 




Sopplayer Screenshot

See Video Documentation : - 






Steps :- 

    1. Use class="sopplayer" in Your <video> Tag .
    2. And Add data-setup="{}", attribute like this .



      <video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      <!--Use class="sopplayer" and data-setup="{}" -->
      <source src="https://cdn.jsdelivr.net/gh/SH20RAJ/SopPlayer@main/sample.mp4" type="video/mp4" />
    </video>
  


    3. Add the Css CDN before </head> Tag .


  <link href="https://cdn.jsdelivr.net/gh/SH20RAJ/SopPlayer@main/sopplayer.css" rel="stylesheet" />
  <!--Here is the Css Library-->
  
  

    4. Add the Javascript CDN before </body> Tag



    <script src="https://rebrand.ly/SopPlayerJS"></script>
    <!--Here is the JavaScript Library-->
  
  

Here you have completed your Sopplayer Intgretion. 

See a Sample Code :- https://replit.com/@SH20RAJ/SopPlayer#index.html

Before Sopplayer

Before Sopplayer

After Sopplayer

After Sopplayer




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">
  <link href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
  <!--Here is the Css Library-->
</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/sopplayer.min.js"></script>
    <!--Here is the JavaScript Library-->
</center>
</body>

</html>

On SopPlayer :- https://sopplayer.blogspot.com/2021/02/sopplayer-integration-html5-stylish.html

See Demo :- https://sh20raj.github.io/Sopplayer/

Or https://sopplayer.github.io/Sopplayer/

Codepen's Pen :- https://codepen.io/SH20RAJ/pen/mdrpRYM


Comments

  1. how to add this player to blogspot

    ReplyDelete
    Replies
    1. It's easy go theme
      . Edit html then add the cdns...
      Or
      Use add widget and past the cdns
      There....

      Delete

Post a Comment

Random Posts