Sopplayer Integration - HTML5 Stylish Video Player
See All SopProducts: https://sh20raj.github.io/SopProducts/
Sopplayer Players: https://sh20raj.github.io/Sopplayer/players/
See Video Documentation: https://youtu.be/Tmj2QOXE6EU
Table of Contents
Steps
- Use the
class="sopplayer"in your<video>tag. - 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>- 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 -->- 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
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>