0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
1 minute read
No comments

SopPlayer – Integration – HTML5 Stylish Video Player

Lucio Laria
February 1, 2024
sopplayer-–-integration-–-html5-stylish-video-player
Total
0
Shares
0
0
0

Sopplayer Integration – HTML5 Stylish Video Player

GitHub logo

SH20RAJ
 /
Sopplayer

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.

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 tag.
  2. Add data-setup="{}" attribute to your tag.
<video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
  
  <source src="sample.mp4" type="video/mp4" />
video>
  1. Add the CSS CDN before the closing tag.
<link href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
  1. Add the JavaScript CDN before the closing tag.
<script src="https://rebrand.ly/SopPlayerJS">script>

Here you have completed your…

View on GitHub

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
  • Before Sopplayer
  • After Sopplayer
  • Full HTML Code Example
  • Additional Information

Steps

  1. Use the class="sopplayer" in your tag.
  2. Add data-setup="{}" attribute to your tag. 
 id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
  
   src="sample.mp4" type="video/mp4" />
  1. Add the CSS CDN before the closing tag. 
 href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
  1. Add the JavaScript CDN before the closing tag.

Here you have completed your Sopplayer Integration.

Before Sopplayer

Before Sopplayer

After Sopplayer

After Sopplayer

Full HTML Code Example


 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
  


  

     id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      
       src="sample.mp4" type="video/mp4" />

Additional Information

See how the full HTML will look like: 


 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/sopplayer.min.css" rel="stylesheet" />
  


  

     id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      
       src="sample.mp4" type="video/mp4" />
Total
0
Shares
Share 0
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
bmf-+-hugging-face,-the-new-video-processing-bffs

BMF 📹 + Hugging Face🤗, The New Video Processing BFFs

February 1, 2024
Next Post
innovating-for-equality:-how-can-technology-address-racial-disparities?

Innovating for Equality: How Can Technology Address Racial Disparities?

February 1, 2024
Related Posts