DEV Community

Sh Raj
Sh Raj

Posted on

Sopplayer Integration: HTML5 Stylish Video Player

Sopplayer Integration: HTML5 Stylish Video Player

Sopplayer is a modern, feature-rich HTML5 video player designed to enhance the visual and interactive experience of video playback on web pages. It is compatible across various devices and browsers, supporting multiple video formats. Here’s a detailed guide on integrating Sopplayer into your website.

Key Features

  1. Stylish Interface: Sopplayer offers a sleek, customizable interface that enhances the aesthetic appeal of your video content.
  2. Cross-Platform Compatibility: Works seamlessly across different devices and browsers.
  3. Ease of Use: Simple integration process with minimal setup required.
  4. Customization Options: Flexible customization to fit different design needs and preferences.

Integration Steps

Step 1: HTML Setup

Add the class="sopplayer" and data-setup="{}" attributes to your <video> tag. This is essential for initializing the player with the default settings.

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

Step 2: Adding CSS

Include the CSS file before the closing </head> tag to style the video player.

<link href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
Enter fullscreen mode Exit fullscreen mode

Step 3: Adding JavaScript

Include the JavaScript file before the closing </body> tag to enable the player’s functionality.

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Full HTML Example

Here is a complete HTML example integrating Sopplayer:

<!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" />
</head>
<body>
  <center>
    <video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      <source src="sample.mp4" type="video/mp4" />
    </video>
  </center>
  <script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Additional Resources

Integrating Sopplayer into your website is straightforward and significantly enhances the video viewing experience with its stylish and user-friendly interface.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.