Sopplayer Integration - HTML5 Stylish Video Player

February 03, 2021

Sopplayer Integration - HTML5 Stylish Video Player

See Demo :-

Visit GitHub - Codepen

Sopplayer Screenshot

See Video Documentation : -

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="http://bit.ly/sopplayercdncss" rel="stylesheet" />
  <!--Here is the Css Library-->

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

HERE IS THE JAVASCRIPT CDN

    <script src="http://bit.ly/sopplayercdnjs"></script>
    <!--Here is the JavaScript Library-->

Here you have completed your Sopplayer Intgretion.

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="http://bit.ly/sopplayercdncss" 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="http://bit.ly/sopplayercdnjs"></script>
    <!--Here is the JavaScript Library-->
</center>
</body>

</html>