TrixBase Skin for Videojs has a clean Ui, with an attractive look, an elegant style and I would say it's really 🆄🅽🅸🆀🆄🅴 to be exact. This skin of course can be edited, reused, commercial use, etc.
A Pen by Presley Blaese on CodePen.
Created
January 1, 2023 10:07
-
-
Save HeNy007/ebe4e326670fb4c5e45e34019c67165e to your computer and use it in GitHub Desktop.
TrixBase Skin Videojs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> | |
| <meta charset="utf-8"> | |
| <title>Video.js Starter Template</title> | |
| </head> | |
| <body> | |
| <video style="box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.1);" id="my-video" class="video-js | |
| vjs-fluid | |
| vjs-big-play-centered" controls preload="auto" width="640" height="268" poster="https://vjs.zencdn.net/v/oceans.png" data-setup="{}"> | |
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" label='mp4'> | |
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" label="webm"> | |
| </video> | |
| <script src="https://unpkg.com/video.js/dist/video.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var player = videojs("my-video"); | |
| player.controlBar.removeChild('FullscreenToggle') | |
| // adding the quality selector before fullscreen | |
| player.controlBar.addChild('QualitySelector'); | |
| player.controlBar.addChild('FullscreenToggle') | |
| player.ready(function() { | |
| this.hotkeys({ | |
| volumeStep: 0.1, | |
| seekStep: 5, | |
| enableModifiersForNumbers: false, | |
| }); | |
| }); | |
| player.seekButtons({ | |
| forward: 10, | |
| back: 10 | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-seek-buttons.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/silvermine-videojs-quality-selector.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/videojs.hotkeys.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-playlist-ui.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #my-video.vjs-fluid { | |
| width: 70%; | |
| padding: 50px; | |
| } | |
| #my-video .vjs-big-play-button { | |
| background: #fa983a; | |
| color: #eb2f06; | |
| border: 2px #eb2f06 solid; | |
| width: 2em; | |
| height: 2em; | |
| line-height: 1.9em; | |
| margin-left: -30px; | |
| font-size: 3.5em; | |
| } | |
| #my-video .vjs-control:focus:before, | |
| #my-video .vjs-control:hover:before, | |
| #my-video .vjs-control:focus { | |
| text-shadow: none; | |
| } | |
| #my-video.vjs-fluid { | |
| width: 90%; | |
| padding-top: 37%; | |
| padding-bottom: 0.45%; | |
| left: 0; | |
| } | |
| #my-video .vjs-picture-in-picture-control { | |
| display: none; | |
| } | |
| #my-video .vjs-current-time { | |
| display: block; | |
| } | |
| #my-video .vjs-control-bar { | |
| background: #fa983a; | |
| font-size: 1.3em; | |
| color: #eb2f06; | |
| border: 0.5px black solid; | |
| border-radius: 5px; | |
| width: 90%; | |
| left: 5%; | |
| bottom: 3%; | |
| box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); | |
| } | |
| #my-video .vjs-play-progress, | |
| #my-video .vjs-volume-level { | |
| background: #e60000; | |
| border-radius: 2em; | |
| } | |
| #my-video .vjs-load-progress { | |
| display: none; | |
| -webkit-text-stroke: 0.2px black; | |
| } | |
| #my-video .vjs-slider { | |
| background: #009432; | |
| border-radius: 2em; | |
| } | |
| #my-video .vjs-control { | |
| -webkit-text-stroke: 0.2px black; | |
| } | |
| #my-video .vjs-menu-content { | |
| background: #fa983a; | |
| }#my-video .vjs-selected { | |
| background: #e58e26; | |
| color: #eb2f06; | |
| } | |
| #my-video .vjs-button:hover { | |
| color: #ea2027; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-seek-buttons.css" rel="stylesheet" /> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/quality-selector.css" rel="stylesheet" /> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-playlist-ui.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment