Skip to content

SH20RAJ/Sopplayer

Folders and files

NameName
Last commit message
Last commit date
Nov 3, 2021
Dec 26, 2020
Dec 23, 2020
Dec 23, 2020
Jul 13, 2023
Nov 15, 2021
Dec 23, 2020
Jan 13, 2022
Dec 23, 2020
Feb 5, 2022
Apr 2, 2024
Feb 3, 2022
Dec 23, 2020
Dec 26, 2020
Dec 26, 2020
Feb 5, 2022
Aug 3, 2023
Dec 23, 2020
Feb 4, 2025
Feb 8, 2024
Feb 5, 2022
Dec 26, 2020
Feb 5, 2022
Mar 25, 2024
Feb 12, 2024

Repository files navigation

Sopplayer Integration - HTML5 Stylish Video Player

Visitors

Sopplayer is a sleek and feature-rich HTML5 video player that enhances the visual experience of videos on web pages. It offers compatibility across devices and browsers, supporting various video formats. With intuitive controls and customizable options, Sopplayer provides a seamless and captivating playback experience for viewers.

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

Player Demo: https://codepen.io/SH20RAJ/pen/QwLRpyx

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="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@main/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://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.js"></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://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.js"></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://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.js"></script>
  <!-- Here is the JavaScript Library -->
</body>
</html>

Try AudiPlay :- AudiPlay - A Free HTML5 Audio Player

Sopplayer - HTML5 Stylish Video Player | Sopplayer | Product Hunt