web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-25 02:42:10 +02:00
Code Releases Activity

Starting new "Activate" method for controls.

Browse Source 
Switched play/pause class on play button to playing/paused class on box, so other elements can style based on that.
This commit is contained in:
Steve Heffernan 2010-11-10 00:05:28 -08:00
parent f59237e0e8
commit 6a682af82c
7 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.markdown
View File

@ -1,6 +1,6 @@
VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 1.1.5
Version 1.2.0
View [VideoJS.com](http://videojs.com) for a demo and overview.

4
skins/hu.css
View File

@ -36,8 +36,8 @@ Version 1.2.0
/* Play/Pause
-------------------------------------------------------------------------------- */
.hu-css .vjs-play-control.vjs-play span { margin: 9px 0 0 12px; }
.hu-css .vjs-play-control.vjs-pause span { margin: 9px 0 0 12px; }
.hu-css.vjs-paused .vjs-play-control span { margin: 9px 0 0 12px; }
.hu-css.vjs-playing .vjs-play-control span { margin: 9px 0 0 12px; }
.hu-css .vjs-play-control:hover { background-color: #000; }
/* Progress

8
skins/tube.css
View File

@ -36,10 +36,10 @@ Version 1.2.0
/* Play/Pause
-------------------------------------------------------------------------------- */
.tube-css .vjs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
.tube-css .vjs-play-control.vjs-play span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
.tube-css .vjs-play-control.vjs-pause span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
.tube-css .vjs-play-control.vjs-play:hover span { border-left-color: #CF1A1A; }
.tube-css .vjs-play-control.vjs-pause:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
.tube-css.vjs-paused .vjs-play-control span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
.tube-css.vjs-playing .vjs-play-control span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
.tube-css.vjs-paused .vjs-play-control:hover span { border-left-color: #CF1A1A; }
.tube-css.vjs-playing .vjs-play-control:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
/* Time Display
-------------------------------------------------------------------------------- */

4
skins/vim.css
View File

@ -23,9 +23,9 @@ Version 1.2.0
/* Play/Pause
-------------------------------------------------------------------------------- */
.vim-css .vjs-controls .vjs-play-control { margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.vim-css .vjs-play-control.vjs-play span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; }
.vim-css .vjs-play-control:hover { background: #00ADEF; }
.vim-css .vjs-play-control.vjs-pause span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }
.vim-css.vjs-paused .vjs-play-control span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; }
.vim-css.vjs-playing .vjs-play-control span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }
/* Progress
-------------------------------------------------------------------------------- */

2
test/test.html
View File

@ -66,7 +66,7 @@
<body>
<!-- Begin VideoJS -->
<div class="video-js-box hu-css">
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

4
video-js.css
View File

@ -88,14 +88,14 @@ so you can upgrade to newer versions easier. */
-------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; }
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-play-control.vjs-play span {
.vjs-paused .vjs-play-control span {
width: 0; height: 0; margin: 8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 10px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
.vjs-play-control.vjs-pause span {
.vjs-playing .vjs-play-control span {
width: 3px; height: 10px; margin: 8px auto 0;
/* Drawing the pause bars with borders */
border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;

32
video.js
View File

@ -1,6 +1,6 @@
/*
VideoJS - HTML5 Video Player
v1.1.5
v1.2.0
This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
@ -302,9 +302,9 @@ var VideoJS = JRClass.extend({
// Listen for when the video ends
this.video.addEventListener("ended", this.onEnded.context(this), false);
// Listen for clicks on the play/pause button
this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false);
this.activateAsPlayPauseButton(this.playControl);
// Make a click on the video act like a click on the play button.
this.video.addEventListener("click", this.onPlayControlClick.context(this), false);
this.activateAsPlayPauseButton(this.video);
/* Activate Play Progress
================================================================================ */
@ -407,28 +407,34 @@ var VideoJS = JRClass.extend({
/* Play/Pause
================================================================================ */
activateAsPlayPauseButton: function(element){
element.addEventListener("click", this.onPlayControlClick.context(this), false);
},
activateAsPlayButton: function(element){
element.addEventListener("click", this.onPlayButtonClick.context(this), false);
},
// React to clicks on the play/pause button
onPlayControlClick: function(event){
if (this.video.paused) {
this.video.play();
} else {
// Android has a problem with "paused" not returning correctly.
if (!this.hasPlayed && VideoJS.isAndroid) {
this.video.play(); return;
} else {
this.video.pause();
}
this.video.pause();
}
},
onPlayButtonClick: function(event){ this.video.play(); },
onPauseButtonClick: function(event){ this.video.pause(); },
// When the video is played
onPlay: function(event){
this.hasPlayed = true;
this.playControl.className = "vjs-play-control vjs-pause";
_V_.removeClass(this.box, "vjs-paused");
_V_.addClass(this.box, "vjs-playing");
this.trackPlayProgress();
},
// When the video is paused
onPause: function(event){
this.playControl.className = "vjs-play-control vjs-play";
_V_.removeClass(this.box, "vjs-playing");
_V_.addClass(this.box, "vjs-paused");
this.stopTrackingPlayProgress();
},
// When the video ends
@ -678,7 +684,7 @@ var VideoJS = JRClass.extend({
this.video.parentNode.appendChild(this.bigPlayButton);
},
activateBigPlayButton: function(){
this.bigPlayButton.addEventListener("click", this.onPlayControlClick.context(this), false);
this.activateAsPlayPauseButton(this.bigPlayButton);
this.video.addEventListener("play", this.bigPlayButtonOnPlay.context(this), false);
this.video.addEventListener("ended", this.bigPlayButtonOnEnded.context(this), false);
},
@ -789,7 +795,7 @@ var VideoJS = JRClass.extend({
// Listen for the mouse moving out of the poster image. Used to hide the controller.
this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
// Make a click on the poster act like a click on the play button.
this.poster.addEventListener("click", this.onPlayControlClick.context(this), false);
this.activateAsPlayButton(this.poster);
// Hide/Show poster on video events
this.video.addEventListener("play", this.posterOnPlay.context(this), false);
this.video.addEventListener("ended", this.posterOnEnded.context(this), false);