Skip to main content

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:

<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video-js.min.css"
  rel="stylesheet"
/>

<!-- City -->
<link
  href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
  rel="stylesheet"
/>

<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>

Designing your own

A great place to start is the Video.js Skin Designer, but at the end of the day we suggest using the cascading aspect of CSS to simply override the parts of the design you want to customize.

At Last add Javascript CDN Just Before </body> Tag.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video.min.js"></script>

1. City Theme 



 

Add Class :- vjs-theme-city 

<!-- City CDN -->
<link
  href="https://unpkg.com/@videojs/themes@1.0.1/dist/city/index.css"
  rel="stylesheet"
/>

2. Fantasy Theme 




Add Class :- vjs-theme-fantasy 

<!-- Fantasy CDN -->
<link
  href="https://unpkg.com/@videojs/themes@1.0.1/dist/fantasy/index.css"
  rel="stylesheet"
/>

3. Forest Theme 





See Video Documentation :- https://youtu.be/dOK_5w4b0vI

Add Class :- vjs-theme-forest
 
<!-- Forest CDN -->
<link
  href="https://unpkg.com/@videojs/themes@1.0.1/dist/forest/index.css"
  rel="stylesheet"
/>

4. Sea Theme 





Add Class :- vjs-theme-sea 

<!-- Sea CDN -->
<link
  href="https://unpkg.com/@videojs/themes@1.0.1/dist/sea/index.css"
  rel="stylesheet"
/>

Sample Video :- BigBuckBunny.mp4

Labels:

Comments

Post a Comment

Popular posts from this blog

Top Free APIs Every Developer Should Know About

Top Free APIs Every Developer Should Know About In the world of software development, APIs (Application Programming Interfaces) are essential for integrating various functionalities into applications. Here’s a curated list of top free APIs categorized by their functionality: 1. Weather APIs OpenWeatherMap API : Provides current weather data, forecasts, and historical weather data for any location. Weatherstack API : Offers real-time weather information, including forecasts and historical data. 2. Maps and Geolocation APIs Google Maps API : Enables integration of interactive maps, geocoding, and route optimization. Mapbox API : Provides customizable maps, navigation, and location search capabilities. 3. Finance and Stock Market APIs Alpha Vantage API : Offers real-time and historical equity and cryptocurrency data. Yahoo Finance API : Provides access to financial news, stock market data, and por...
Post a Comment
Read more

Google Drive Proxy Video Player - Bypass Limits - JW Player - Embed drive videos

GooDrive :- https://goodrive.stream/ Google Drive Proxy Player #1 :- https://youtu.be/9VQK8W2iUkg Dev.to Article
1 comment
Read more

Making AI Song Covers with RVC - Google Colab

Making AI Song Covers with RVC * Google Colab or Local Install These are the two main options for making AI song covers. You can run RVC on your computer if you have a PC with a decent NVIDIA graphics card (GPU), or you can run it for free through the Google Colab web page. Running Google Colab This is the recommended Google Colab for using voice models: https://colab.research.google.com/drive/1Gj6UTf2gicndUW_tVheVhTXIIYpFTYc7?usp=sharing After enough time, Google limits your GPU usage and you have to wait to use the GPU again. This will slow down your conversion speeds, but it will still be usable as long as you use ‘rmvpe’ mode (considered to be the general best mode, tied with mangio-crepe). ~3 minute song took 9 minutes for me without the GPU. Some people make alternate Google accounts to get around the GPU limits, or they pay for Colab Pro. Most commonly happens for people training their own voices since that requires a lot of GPU power. Running Locally Check...
Post a Comment
Read more

Random Posts