Tube Skin Retina for VideoJS

Features

• Video.js that is open source HTML5 & Flash video player, as well as YouTube and Vimeo (through plugins), used on over 400,000 websites
• Skin with Tube Style
• Retina Ready & Fully Responsive
• HTML5 & CSS3
• Support videojs-logo / videojs-watermark
• Support keyboard shortcuts:
– Up/down arrow or mouse wheel -> control volume
– Right/left arrow -> seek player by 5s
– M -> toggle mute
– F or double click -> toggle fullscreen
– F or Esc -> exits full-screen mode
– 0 -> restart video
– 1-9 -> skip to a particular section of the video (e.g., 0 is 0%, 9 is 90% and 5 goes to the video midpoint)

• Support and updates
• Wishlist Support
• Well Documented

Include the skin on the page

The base Video.js skin is made using HTML and CSS. That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding the styles you’d like to change.

<link rel="stylesheet" type="text/css" href="./video-js-5.10.4/video-js.min.css></link>
<link rel="stylesheet" type="text/css" href="./video-js/videojs-tube.min.css></link>

<script type="text/javascript" src="./video-js/video.js" ></script>

<video class="video-js vjs-big-play-centered">

Reference

• VideoJS Player Homepage
• VideoJS Player Documentation
• Learn more about CSS Skinning Guide
• Learn more about Building VideoJS Skins
• Create Custom VideoJS Player
• Icons font generator using SVG files
• PX to EM conversion made simple
• Online CSS Minifier/Compressor
• VideoJS Source Code
• How to build VideoJS from source

Changelog

• Tube Skin Retina for VideoJS 7 – 08 May 2019.
• Tube Skin Retina for VideoJS 6 – 20 June 2017.
• Launch: The launch of the Tube Skin Retina for VideoJS 5 project – 01 June 2016.

Other Skins

• Flor – HTML5 Video Player
• Skin for VideoJS: Soccer, Fuzzy, AIR, Flat, Tube
• Skins for JWPlayer: AIR, Flat, Tube, Thin