Skip to main content

Posts

Showing posts with the label Video.js Skins

Custom HTML5 Video Player - CuteSu - VideoJS Custom Skin Implementation

Custom HTML5 Video Player - CuteSu - VideoJS Custom Skin Implementation Full Screen Demo :-  https://sopplayer.sh20raj.repl.co/CatSu/ Steps :- 1. Add </video> Tag...     - About Video Tag -> <video id="my-video" class="video-js" controls poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" data-setup='' loop> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type='video/mp4'/> </video> 2. Add CSS CDN...     (Before </head> Tag) <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sh20raj/SopPlayer@main/CatSu/catsu.min.css"/> <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Questrial'> 3.

SP-FLAMINGO - SopPlayer Skin Integration

SP-FLAMINGO SopPlayer Skin Integration See Demo :- https://sopplayer.sh20raj.repl.co/flamingo/  Demo Website :-  https://sopplayer.github.io/SP-FLAMINGO/  or  https://sopplayer.sh20raj.repl.co/flamingo View on Repl.it :-  https://replit.com/@SH20RAJ/SopPlayer#flamingo Steps to Import :-  Steps :-        1. Use  class = "sopplayer" in Your <video> Tag .      2. And Add  data-setup = "{}" , attribute like this . HERE IS THE FULL VIDEO CODE      < video   id = "my-video"   poster = " https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg "           class = "sopplayer"   controls   preload = "auto"   data-setup = "{}"   width = "500px" >        <!--Use class="sopplayer" and data-setup="{}" -->        < source   src = "https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4"

Video-js Custom Skin Implement ( City , Fantasy , Forest , Sea )

Video-js Custom Skin Implement ( City , Fantasy , Forest , Sea ) Firstly See How to integrate Video.Js Video Player in Simple HTML5 Video Player View-> Customize Using Video.js straight out of the box is fine, but we think it's better if you make it your own. Plugins and skins make it possible to completely customize your player. Skinning The player skin is completely built from HTML and CSS, including when Flash and other players like YouTube are used. Skin changes can be as simple as centering the play button (you can just add the 'vjs-big-play-centered' class to your video tag), or as complex as creating entirely new layouts. We've built a codepen project where you can explore different changes. Home Page Themes The themes in the home page come from the  Videojs Themes library . To use them in your player, import the CSS, then add the relevant class to your video tag. For example, if you want to use the  City  theme, you could set up your HTML like so: <!-- I

Random Posts