Google Drive Video Player With Video.Js with self customised HTML5 video Player

Facebook Twitter Email Whatsapp

1. Get the link / id of your Google Drive video

   2. Now Your Video's Url Should be - 

          https://drive.google.com/u/0/uc?id=[ Video ID ]&export=download

   3. Now , Go to videojs.com and Copy the video tag Syntax 

        with cdns 

         (i) For Css - 

<link href="https://cdn.jsdelivr.net/gh/CDNSFree/VideoJS/videojs.min.css" rel="stylesheet" />

         (ii) For Js - 

<script src="https://cdn.jsdelivr.net/gh/CDNSFree/VideoJS/videojs.min.js"></script>

    4. Your , HTML5 Video.js player will Ready .....

Steps :- 

  1. Its a simple player ....

   2. Now , adding video.js ....

3. This is Too bad / old player weired ...

You can Customise it ....

This are Examples ....

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://cdn.jsdelivr.net/gh/CDNSFree/VideoJS/videojs.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>

HTML

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://cdn.jsdelivr.net/gh/CDNSFree/VideoJS/videojs.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