commit du 08 10 2013 18:24

diff --git a/css/video-js-tc.css b/css/video-js-tc.css
index 2c95ceb7c7fcf751886271aa37029a815a812c56..ff949a04ed09db8235e5034aa3f47c48d0469d15 100644 (file)
--- a/css/video-js-tc.css
+++ b/css/video-js-tc.css
@@ -15,7 +15,7 @@ e.g. <video class="video-js my-skin-name">
 
 
 .vjs-tc-skin {
-  color: #cccccc;
+  color: #ffffff;
 }
 /* Custom Icon Font
 --------------------------------------------------------------------------------
@@ -35,37 +35,31 @@ The control icons are from a custom font. Each icon corresponds to a character
   padding: 0;
   /* background-color-with-alpha */
   background-color: #333333;
-  background-color: rgba(51, 51, 51, 0.9);
+  background-color: rgba(51, 51, 51, 0.6);
 }
 .vjs-tc-skin .vjs-slider:focus {
   /* box-shadow */
-  -webkit-box-shadow: 0 0 2em #ffffff;
-  -moz-box-shadow: 0 0 2em #ffffff;
-  box-shadow: 0 0 2em #ffffff;
+  -webkit-box-shadow: 0 0 0em #ffffff;
+  -moz-box-shadow: 0 0 0em #ffffff;
+  box-shadow: 0 0 0em #ffffff;
 }
 .vjs-tc-skin .vjs-slider-handle {
   position: absolute;
   /* Needed for IE6 */
-  left: 0;
+  left: 0px;
   top: 0;
 }
 .vjs-tc-skin .vjs-slider-handle:before {
-  content: "\e009";
-  font-family: VideoJS;
-  font-size: 1em;
-  line-height: 1;
+  content: "|";
+  font-family: 'ralewaymedium';
+  font-size: 5em;
+  line-height: 2.5em;
   text-align: center;
-  text-shadow: 0em 0em 1em #fff;
+  text-shadow: 0em 0em 0em #fff;
   position: absolute;
-  top: 0;
-  left: 0;
-  /* Rotate the square icon to make a diamond */
-  /* transform */
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
+  top: -1.15em;
+  left: 1px;
+
 }
 /* Control Bar
 --------------------------------------------------------------------------------
@@ -149,12 +143,12 @@ fonts to show/hide properly.
   width: 100%;
   height: 100%;
   text-align: center;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
 }
 /* Replacement for focus outline */
 .vjs-tc-skin .vjs-control:focus:before,
 .vjs-tc-skin .vjs-control:hover:before {
-  text-shadow: 0em 0em 1em #ffffff;
+  text-shadow: 0em 0em 0em #ffffff;
 }
 .vjs-tc-skin .vjs-control:focus {
   /*  outline: 0; */
@@ -167,8 +161,8 @@ fonts to show/hide properly.
   /* hide-visually */
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
+  height: 10px;
+  margin: 0px;
   overflow: hidden;
   padding: 0;
   position: absolute;
@@ -180,11 +174,12 @@ fonts to show/hide properly.
 .vjs-tc-skin .vjs-play-control {
   width: 5em;
   cursor: pointer;
+  top: -16px;
 }
 .vjs-tc-skin .vjs-play-control:before {
   content: "\e001";
 }
-.vjs-tc-skin .vjs-playing .vjs-play-control:before {
+.vjs-tc-skin.vjs-playing .vjs-play-control:before {
   content: "\e002";
 }
 /* Volume/Mute
@@ -193,6 +188,7 @@ fonts to show/hide properly.
 .vjs-tc-skin .vjs-volume-menu-button {
   cursor: pointer;
   float: right;
+  margin: 0.5em -4.5em 0em 0em;
 }
 .vjs-tc-skin .vjs-mute-control:before,
 .vjs-tc-skin .vjs-volume-menu-button:before {
@@ -213,31 +209,35 @@ fonts to show/hide properly.
 .vjs-tc-skin .vjs-volume-control {
   width: 5em;
   float: right;
+  margin-left: 2.5em;
 }
 .vjs-tc-skin .vjs-volume-bar {
   width: 5em;
-  height: 0.6em;
-  margin: 1.1em auto 0;
+  height: 0.3em;
+  margin: 1.8em auto 0;
+  margin-left: 2.5em;
 }
 .vjs-tc-skin .vjs-volume-menu-button .vjs-menu-content {
   height: 2.9em;
 }
 .vjs-tc-skin .vjs-volume-level {
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.5em;
-  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
+  top: 0em;
+  width:100%;
+  left: 0px;
+  height: 0.3em;
+  background: #ffffff;
 }
 
 .vjs-tc-skin .vjs-volume-bar .vjs-volume-handle {
   width: 0.5em;
-  height: 0.5em;
+  height: 0.3em;
+  left: 0px;
 }
 .vjs-tc-skin .vjs-volume-handle:before {
-  font-size: 0.9em;
-  top: -0.2em;
-  left: -0.2em;
+  font-size: 1.2em;
+  top: -1.2em;
+  left: 0px;
   width: 1em;
   height: 1em;
 }
@@ -250,9 +250,9 @@ fonts to show/hide properly.
 */
 .vjs-tc-skin .vjs-progress-control {
   position: absolute;
-  left: 2.5%;
-  right: 2.5%;
-  width: 95%;
+  left: 4%;
+  right: 1%;
+  width: auto;
   font-size: 0.3em;
   height: 1em;
   /* Set above the rest of the controls. */
@@ -283,17 +283,27 @@ fonts to show/hide properly.
   height: 100%;
 }
 /* Progress Bars */
-.vjs-tc-skin .vjs-progress-holder .vjs-play-progress,
-.vjs-tc-skin .vjs-progress-holder .vjs-load-progress {
+.vjs-tc-skin .vjs-progress-holder .vjs-play-progress {
   position: absolute;
   display: block;
   height: 100%;
   margin: 0;
   padding: 0;
   /* Needed for IE6 */
-  left: 0;
+  left: 0px;
   top: 0;
 }
+
+.vjs-tc-skin .vjs-progress-holder .vjs-load-progress {
+  position: absolute;
+  display: block;
+  height: 25%;
+  margin: 0;
+  padding: 0;
+  /* Needed for IE6 */
+  left: -1px;
+  top: 0.3em;
+}
 .vjs-tc-skin .vjs-play-progress {
   /*
     Using a data URI to create the white diagonal lines with a transparent
@@ -304,11 +314,12 @@ fonts to show/hide properly.
       The -50% left position makes that happen.
   */
 
-  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
+  background: #ffffff;
 }
 .vjs-tc-skin .vjs-load-progress {
-  background: #646464 /* IE8- Fallback */;
-  background: rgba(255, 255, 255, 0.4);
+  background: #ffffff /* IE8- Fallback */;
+  background: rgba(255, 255, 255, 0.8);
+  height: 100%;
 }
 .vjs-tc-skin .vjs-seek-handle {
   width: 1.5em;
@@ -347,12 +358,14 @@ fonts to show/hide properly.
   width: 3.8em;
   cursor: pointer;
   float: right;
+  left:1000px;
+  
 }
 .vjs-tc-skin .vjs-fullscreen-control:before {
   content: "\e000";
 }
 /* Switch to the exit icon when the player is in fullscreen */
-.vjs-tc-skin .vjs-fullscreen .vjs-fullscreen-control:before {
+.vjs-tc-skin.vjs-fullscreen .vjs-fullscreen-control:before {
   content: "\e00b";
 }
 /* Big Play Button (play button at start)
@@ -363,21 +376,21 @@ easily in the skin designer. http://designer.videojs.com/
 .vjs-tc-skin .vjs-big-play-button {
   left: 50%;
   top: 50%;
-  margin-top: -3.5em;
   margin-left: -2.5em;
+  margin-top: -2.5em;
   font-size:3em;
   display: block;
   z-index: 2;
   position: absolute;
   width: 5em;
-  height: 6em;
+  height: 5em;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   opacity: 1;
   background: url('../img/play-1.svg') no-repeat;
-  background-size: contain;
-  background-position:center top;
+  background-size: 100% 100%;
+  background-position:center center;
   /* Need a slightly gray bg so it can be seen on black backgrounds */
   /* background-color-with-alpha */
   background-color:#505050;
@@ -415,11 +428,12 @@ easily in the skin designer. http://designer.videojs.com/
   outline: 0;
   border-color: #ffffff;
   /* IE8 needs a non-glow hover state */
-  background: url('../img/play-2.svg') no-repeat;
-  background-size: contain;
-  background-position:center top;
+  background: url('../img/play-1.svg') no-repeat;
+  opacity:0.50;
+  background-size: 100% 100%;
+  background-position:center center;
   background-color: #505050;
-  background-color: rgba(50, 50, 50, 0.5);
+  background-color: rgba(50, 50, 50, 0);
   /* box-shadow */
   -webkit-box-shadow: 0 0 0em #ffffff;
   -moz-box-shadow: 0 0 0em #ffffff;
@@ -431,13 +445,14 @@ easily in the skin designer. http://designer.videojs.com/
   transition: all 0s;
 }
 .vjs-tc-skin .vjs-big-play-button:before {
-  content: ;
-  font-family:;
+  content: "\e001";
+  font-family: VideoJS;
+  opacity:0; 
   /* In order to center the play icon vertically we need to set the line height
      to the same as the button height */
 
-  line-height: 6em;
-  text-shadow: 0.05em 0.05em 0.1em #000;
+  line-height: 2.5em;
+  text-shadow: 0em 0em 0em #000;
   text-align: center /* Needed for IE8 */;
   position: absolute;
   left: 0;

diff --git a/ifr-home.html b/ifr-home.html
index eff6274c0a3fba0f9470a2b5c20149094e3693ff..803e585b891a0e17fef12c37ceae4660aad4de86 100644 (file)
--- a/ifr-home.html
+++ b/ifr-home.html
@@ -12,6 +12,7 @@
   <link rel="stylesheet" type="text/css" href="css/component.css" />
   <link rel="stylesheet" type="text/css" href="css/animations.css" />
   <link rel="stylesheet" type="text/css" href="css/video-js-tc.css" />
+   <link rel="stylesheet" type="text/css" href="css/video-js.css" />
   <script src="js/modernizr.custom.js"></script>
   <script src="js/video.js"></script>
   
@@ -48,7 +49,7 @@
    <div class="pt-page color02 pt-page-4"><h1><span>A collection of</span><strong>Page4</strong> Transitions</h1></div>
    <div class="pt-page color02 pt-page-5"><h1><span>A collection of</span><strong>Page5</strong> Transitions</h1></div>
    <div class="pt-page color08 pt-page-6">
-   <video id="player" class="video-js vjs-tc-skin" width="100%" height="100%"  controls poster="vid/tele01.png" data-setup="{}">
+   <video id="player" class="video-js vjs-default-skin" width="100%" height="100%"  controls poster="vid/tele01.png" data-setup="{}">
    <source src="vid/tele01.mp4" type="video/mp4" />
    <source src="vid/tele01.webm" type="video/webm" />
    <source src="vid/tele01.ogv" type="video/ogg" />