sopplayer

1.0.0 • Public • Published

Sopplayer Integration - HTML5 Stylish Video Player

See All SopProducts: https://sh20raj.github.io/SopProducts/

Sopplayer Players: https://sh20raj.github.io/Sopplayer/players/

Sopplayer Screenshot

See Video Documentation: https://youtu.be/Tmj2QOXE6EU

Table of Contents

Steps

  1. Use the class="sopplayer" in your <video> tag.
  2. Add data-setup="{}" attribute to your <video> tag.
<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>
  1. Add the CSS CDN before the closing </head> tag.
<link href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
<!-- Here is the CSS Library -->
  1. Add the JavaScript CDN before the closing </body> tag.
<script src="https://rebrand.ly/SopPlayerJS"></script>
<!-- Here is the JavaScript Library -->

Here you have completed your Sopplayer Integration.

Before Sopplayer

Before Sopplayer

After Sopplayer

After Sopplayer

Full HTML Code Example

<!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>
<body>
  <center>
    <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>
  </center>
  <script src="https://rebrand.ly/SopPlayerJS"></script>
  <!-- Here is the JavaScript Library -->
</body>
</html>

Additional Information

See how the 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>
<body>
  <center>
    <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>
  </center>
  <script src="https://rebrand.ly/SopPlayerJS"></script>
  <!-- Here is the JavaScript Library -->
</body>
</html>

Package Sidebar

Install

npm i sopplayer

Weekly Downloads

13

Version

1.0.0

License

MIT

Unpacked Size

33 MB

Total Files

148

Last publish

Collaborators

  • sh20raj