Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Control bar updates #672

Closed
wants to merge 11 commits into from
159 changes: 96 additions & 63 deletions src/css/video-js.less
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ Version GENERATED_AT_BUILD
Create your own skin at http://designer.videojs.com
*/

// To customize the player skin, change the values of the variables or edit the
// To customize the player skin, change the values of the variables or edit the
// CSS below.
// (This file uses LESS. Learn more at http://lesscss.org/)

// The base font size controls the size of everything, not just text. All
// The base font size controls the size of everything, not just text. All
// diminensions use em-based sizes so that the scale along with the font size.
// Try increasing it to 20px and see what happens.
@base-font-size: 10px;
@touch-device-font-size: 15px;

// The main font color controls the color of the text and the icons (font icons)
@main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff

// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all black video frames, which are
// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all black video frames, which are
// common.
@control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
@control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity
Expand All @@ -32,12 +33,12 @@ Create your own skin at http://designer.videojs.com
@slider-background-color: #333333;
@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity

// The "Big Play Button" is the play button that shows before the video plays.
// To center it set the align values to center and middle. The typical location
// The "Big Play Button" is the play button that shows before the video plays.
// To center it set the align values to center and middle. The typical location
// of the button is the center, but there is trend towards moving it to a corner
// where it gets out of the way of valuable content in the poster image.
@big-play-align: left; // left, center, or right
@big-play-vertical-align: top; // top, middle, or bottom
@big-play-vertical-align: top; // top, middle, or bottom
// The button colors match the control colors by default but you can customize
// them by replace the variables (@control-bg-color) with your own color values.
@big-play-bg-color: @control-bg-color;
Expand All @@ -58,9 +59,9 @@ Create your own skin at http://designer.videojs.com

/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
Expand Down Expand Up @@ -98,7 +99,7 @@ The control icons are from a custom font. Each icon corresponds to a character
@captions-icon: "\e008";

/* Base UI Component Classes
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

/* Slider - used for Volume bar and Seek bar */
Expand Down Expand Up @@ -141,13 +142,13 @@ The control icons are from a custom font. Each icon corresponds to a character

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
/* Start hidden *///
display: none;
position: absolute;
/* Place control bar at the bottom of the player box/video.
/* Place control bar at the bottom of the player box/video.
If you want more margin below the control bar, add more height. *///
bottom: 0;
/* Use left/right to stretch to 100% width of player div *///
Expand All @@ -159,6 +160,36 @@ The default control bar that is a container for most of the controls.
.background-color-with-alpha(@control-bg-color, @control-bg-alpha);
}

/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
display: block;
/* Visibility needed to make sure things hide in older browsers too. */
visibility: visible;
opacity: 1;

@trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
.transition(@trans);
}

/* Hide the control bar when the video is playing and the user is inactive */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
display: block;
visibility: hidden;
opacity: 0;

@trans: visibility 1.0s, opacity 1.0s;
.transition(@trans);
}

.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
display: none;
}

.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
display: none;
}


/* General styles for individual controls. *///
.vjs-default-skin .vjs-control {
outline: none;
Expand Down Expand Up @@ -191,15 +222,15 @@ The default control bar that is a container for most of the controls.
text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
}

.vjs-default-skin .vjs-control:focus {
.vjs-default-skin .vjs-control:focus {
/* outline: 0; *///
/* keyboard-only users cannot see the focus on several of the UI elements when
this is set to 0 */
}

/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
.hide-visually;
.vjs-default-skin .vjs-control-text {
.hide-visually;
}

/* Play/Pause
Expand Down Expand Up @@ -388,7 +419,7 @@ The default control bar that is a container for most of the controls.

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
Expand Down Expand Up @@ -420,6 +451,20 @@ easily in the skin designer. http://designer.videojs.com/
.transition(all 0.4s);
}

/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
display: none;
}
/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
display: none;
}
/* Hide on mobile devices. Remove when we stop using native controls
by default on mobile */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
display: none;
}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
outline: 0;
Expand Down Expand Up @@ -609,18 +654,18 @@ REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
background-color: #000;
position: relative;
padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and
/* Start with 10px for base font size so other dimensions can be em based and
easily calculable. */
font-size: @base-font-size;
/* Allow poster to be vertially aligned. */
Expand Down Expand Up @@ -649,7 +694,7 @@ control positioning and full window mode. **
height: 100%;
}

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }

Expand All @@ -675,9 +720,12 @@ body.vjs-full-window {
_position: absolute;
}
.video-js:-webkit-full-screen {
width: 100% !important;
width: 100% !important;
height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
cursor: none;
}

/* Poster Styles */
.vjs-poster {
Expand All @@ -699,6 +747,11 @@ body.vjs-full-window {
width: 100%;
}

/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
display: none;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
Expand All @@ -722,26 +775,6 @@ body.vjs-full-window {
.video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
.vjs-tt-cue { display: block; }

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
display: block !important;
/* Visibility needed to make sure things hide in older browsers too. */
visibility: visible;
opacity: 1;

@trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
.transition(@trans);
}
.vjs-fade-out {
display: block !important;
visibility: hidden;
opacity: 0;

@trans: visibility 1.5s, opacity 1.5s;
.transition(@trans);
/* Wait a moment before fading out the control bar */
.transition-delay(2s);
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden { display: none; }

Expand All @@ -751,9 +784,9 @@ body.vjs-full-window {
visibility: visible;
}

// MIXINS
// MIXINS
// =============================================================================
// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
// when needed.

// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Expand Down Expand Up @@ -813,7 +846,7 @@ body.vjs-full-window {
.user-select (@string: none) {
/* user-select *///
-webkit-user-select: @string;
-moz-user-select: @string;
-moz-user-select: @string;
-ms-user-select: @string;
user-select: @string;
}
Expand All @@ -822,14 +855,14 @@ body.vjs-full-window {
// http://h5bp.com/v
.hide-visually () {
/* hide-visually *///
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position:
absolute;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position:
absolute;
width: 1px;
}

Expand Down Expand Up @@ -882,27 +915,27 @@ body.vjs-full-window {
// * We want this file to continue to be accessible by people who don't know
// LESS but know CSS. This means finding the balance between using the most
// valuable LESS features (e.g. variables) and keeping it looking like CSS.
// So it's best to avoid advanced LESS features like conditional statements.
// (we're using one for the big play button position because that's a hot
// So it's best to avoid advanced LESS features like conditional statements.
// (we're using one for the big play button position because that's a hot
// topic)
//
//
// * We care about the readability of the CSS output of LESS, which means we
// have to be careful about what features of LESS we use. (if you're building
// your own skin this may not apply)
// 1. Comments inside of rules (strangely) have an extra line added after
// them in the CSS output. To avoid this we can add a LESS comment after
// 1. Comments inside of rules (strangely) have an extra line added after
// them in the CSS output. To avoid this we can add a LESS comment after
// the CSS comment.
// /* comment *///
//
//
// 2. In a rule with nested rules, any comments outside of a rule are moved
// to the top of the parent rule. i.e. it might look like:
// /* title of rule 1 */
// /* title of rule 2 */
// .rule1 {}
// .rule2 {}
// This is why we aren't using nested rules inside of the
// This is why we aren't using nested rules inside of the
// vjs-default-skin class.

/* -----------------------------------------------------------------------------
The original source of this file lives at
/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
22 changes: 3 additions & 19 deletions src/js/big-play-button.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
/* Big Play Button
================================================================================ */
/**
* Initial play button. Shows before the video has played.
* Initial play button. Shows before the video has played. The hiding of the
* big play button is done via CSS and player states.
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.BigPlayButton = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);

if (!player.controls()) {
this.hide();
}

player.on('play', vjs.bind(this, this.hide));
// player.on('ended', vjs.bind(this, this.show));
}
});
vjs.BigPlayButton = vjs.Button.extend();

vjs.BigPlayButton.prototype.createEl = function(){
return vjs.Button.prototype.createEl.call(this, 'div', {
Expand All @@ -29,10 +18,5 @@ vjs.BigPlayButton.prototype.createEl = function(){
};

vjs.BigPlayButton.prototype.onClick = function(){
// Go back to the beginning if big play button is showing at the end.
// Have to check for current time otherwise it might throw a 'not ready' error.
//if(this.player_.currentTime()) {
//this.player_.currentTime(0);
//}
this.player_.play();
};
5 changes: 3 additions & 2 deletions src/js/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ vjs.Button = vjs.Component.extend({
vjs.Component.call(this, player, options);

var touchstart = false;
this.on('touchstart', function() {
this.on('touchstart', function(event) {
// Stop click and other mouse events from triggering also
event.preventDefault();
touchstart = true;
});
this.on('touchmove', function() {
Expand All @@ -24,7 +26,6 @@ vjs.Button = vjs.Component.extend({
self.onClick(event);
}
event.preventDefault();
event.stopPropagation();
});

this.on('click', this.onClick);
Expand Down
Loading