--- a/web/index.html Thu Oct 04 20:39:57 2012 +0200
+++ b/web/index.html Fri Oct 05 13:44:45 2012 +0200
@@ -1,59 +1,53 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <title>The End Player Test</title>
- <link rel="stylesheet" href="static/res/css/style.css">
-</head>
-<body bgcolor="#000000">
-
- <section id="main">
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+ <link rel="stylesheet" href="static/res/css/style.css" />
+ </head>
+ <body>
+
+ <!-- Content Video + Controls -->
+ <div id="playerContainer">
+ <!-- Video -->
+ <div id="video">
+ </div>
+ <!-- /Video -->
+
+ <!-- Controls container -->
+ <div id="controlContainer">
+ <div id="controlbar">
+ <button id="btnPlay" class="bnt"
+ onClick="incPlayer.ctrlPlay(this);">Play/Pause</button><!--
+
+ --><button id="btnBck" class="bnt"
+ onClick="incPlayer.ctrlBackward(this);">Back</button><!--
+
+ --><button id="btnFwd" class="bnt"
+ onClick="incPlayer.ctrlForward(this);">Forward</button><!--
+
+ --><button id="btnFullScr" class="bnt"
+ onClick="incPlayer.ctrlFullscreen(this);">FS</button><!--
+
+ --><button id="btnHD" class="bnt"
+ onClick="incPlayer.ctrlHd(this);">HD</button>
+ </div>
+ </div>
+ <!-- /Controlbar container -->
+ </div>
+ <!-- /Content Video + Controls -->
- <div id="videos">
- </div>
-
- <div id="controls">
- <input id="playButton" type="image" src="static/res/img/ctrlplay.jpg"
- onMouseOver="this.src='static/res/img/ctrlplayover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlplay.jpg'"
- onClick="incPlayer.ctrlPlay(this);"
- >
- <input type="image" src="static/res/img/ctrlback.jpg"
- onMouseOver="this.src='static/res/img/ctrlbackover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlback.jpg'"
- onClick="incPlayer.ctrlBackward(this);"
- >
- <input type="image" src="static/res/img/ctrlnext.jpg"
- onMouseOver="this.src='static/res/img/ctrlnextover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlnext.jpg'"
- onClick="incPlayer.ctrlForward(this);"
- >
- <input type="image" src="static/res/img/ctrlfullscreen.jpg"
- onMouseOver="this.src='static/res/img/ctrlfullscreenover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlfullscreen.jpg'"
- onClick="incPlayer.ctrlFullScreen(this);"
- >
- <input type="image" src="static/res/img/ctrlhd.jpg"
- onMouseOver="this.src='static/res/img/ctrlhdover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlhd.jpg'"
- onClick="incPlayer.ctrlHd(this);"
- >
- </div>
-
- </section>
-
- <script src="static/res/js/popcorn-complete.js"></script>
- <script src="static/res/js/popcorn.sequence.js"></script>
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/incplayer.js"></script>
- <script>
- $(function() {
- if (incPlayer.init("videos", "#playButton", "static/res/json/sequences.json", true)) {
- incPlayer.createPopSequence();
- }
- });
- </script>
-</body>
+ <!-- jQuery -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/popcorn-complete.js"></script>
+ <script src="static/res/js/popcorn.sequence.js"></script>
+ <script src="static/res/js/incplayer.js"></script>
+ <script>
+ $(function() {
+ if (incPlayer.init("video", "#playButton", "static/res/json/sequences.json", true)) {
+ incPlayer.createPopSequence();
+ }
+ });
+ </script>
+ </body>
</html>
\ No newline at end of file
--- a/web/index2.html Thu Oct 04 20:39:57 2012 +0200
+++ b/web/index2.html Fri Oct 05 13:44:45 2012 +0200
@@ -1,62 +1,57 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <title>The End Player Test</title>
- <link rel="stylesheet" href="static/res/css/style2.css">
-</head>
-<body bgcolor="#000000">
-
- <section id="main">
-
- <div id="videos">
- </div>
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+ <link rel="stylesheet" href="static/res/css/style.css" />
+ </head>
+ <body>
+
+ <!-- Content Video + Controls -->
+ <div id="playerContainer">
+ <!-- Video -->
+ <div id="video">
+ </div>
+ <!-- /Video -->
+
+ <!-- Controls container -->
+ <div id="controlContainer">
+ <div id="controlbar">
+ <button id="btnPlay" class="bnt"
+ onClick="incPlayer.ctrlPlay(this);">Play/Pause</button><!--
+
+ --><button id="btnBck" class="bnt"
+ onClick="incPlayer.ctrlBackward(this);">Back</button><!--
+
+ --><button id="btnFwd" class="bnt"
+ onClick="incPlayer.ctrlForward(this);">Forward</button><!--
+
+ --><button id="btnFullScr" class="bnt"
+ onClick="incPlayer.ctrlFullscreen(this);">FS</button><!--
+
+ --><button id="btnHD" class="bnt"
+ onClick="incPlayer.ctrlHd(this);">HD</button>
+ </div>
+ </div>
+ <!-- /Controlbar container -->
- <div id="controls">
- <input id="playButton" type="image" src="static/res/img/ctrlplay.jpg"
- onMouseOver="this.src='static/res/img/ctrlplayover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlplay.jpg'"
- onClick="incPlayer.ctrlPlay(this);"
- >
- <input type="image" src="static/res/img/ctrlback.jpg"
- onMouseOver="this.src='static/res/img/ctrlbackover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlback.jpg'"
- onClick="incPlayer.ctrlBackward(this);"
- >
- <input type="image" src="static/res/img/ctrlnext.jpg"
- onMouseOver="this.src='static/res/img/ctrlnextover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlnext.jpg'"
- onClick="incPlayer.ctrlForward(this);"
- >
- <input type="image" src="static/res/img/ctrlfullscreen.jpg"
- onMouseOver="this.src='static/res/img/ctrlfullscreenover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlfullscreen.jpg'"
- onClick="incPlayer.ctrlFullScreen(this);"
- >
- <input type="image" src="static/res/img/ctrlhd.jpg"
- onMouseOver="this.src='static/res/img/ctrlhdover.jpg'"
- onMouseOut="this.src='static/res/img/ctrlhd.jpg'"
- onClick="incPlayer.ctrlHd(this);"
- >
- </div>
-
- <br><br>
- <font id="message" size="9" color="ffffff">void</font>
-
- </section>
-
- <script src="static/res/js/popcorn-complete.js"></script>
- <script src="static/res/js/popcorn.sequence.js"></script>
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/incplayer.js"></script>
- <script>
- $(function() {
- if (incPlayer.init("videos", "#playButton", "static/res/json/sequences2.json", false)) {
- incPlayer.createPopSequence();
- }
- });
- </script>
-</body>
-</html>
+ <br><br>
+ <font id="message" size="9" color="ffffff">void</font>
+
+ </div>
+ <!-- /Content Video + Controls -->
+
+ <!-- jQuery -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/popcorn-complete.js"></script>
+ <script src="static/res/js/popcorn.sequence.js"></script>
+ <script src="static/res/js/incplayer.js"></script>
+ <script>
+ $(function() {
+ if (incPlayer.init("video", "#playButton", "static/res/json/sequences2.json", false)) {
+ incPlayer.createPopSequence();
+ }
+ });
+ </script>
+ </body>
+</html>
--- a/web/static/res/css/style.css Thu Oct 04 20:39:57 2012 +0200
+++ b/web/static/res/css/style.css Fri Oct 05 13:44:45 2012 +0200
@@ -1,19 +1,190 @@
+/*----------------------------------------------*/
+/* Summary */
+/*----------------------------------------------*/
+
+/* 1- Mentions */
+/* 2- Color codes */
+/* 3- Reset */
+/* 4- Base styles */
+/* 5- Video */
+/* 6- Controls */
+/* 7- Sidebar */
+/* 8- Contact */
+/* 9- Footer */
+
+/*----------------------------------------------*/
+/* 1- Mentions */
+/*----------------------------------------------*/
+
+/* @client : The End */
+/* @date : octobre 2012 */
+
+/*----------------------------------------------*/
+/* 2- Color codes */
+/*----------------------------------------------*/
+
+/*----------------------------------------------*/
+/* 3- Reset */
+/*----------------------------------------------*/
+
+html, body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td {
+ margin:0;
+ padding:0;
+}
+html {
+ font-size: 100%;
+}
+h1,h2,h3,h4,h5,h6 {
+ font-size: 100%;
+ font-weight: normal;
+ font-style: normal;
+}
+fieldset,img, button {
+ border: 0;
+}
+li {
+ list-style: none;
+}
+textarea, table, td {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+caption,th {
+ text-align: left;
+}
+legend {
+ color: #000;
+}
+blockquote:before, blockquote:after, q:before, q:after {
+ content: '';
+ content: none;
+}
+label, input[type="submit"], input[type="button"], button {
+ cursor: pointer;
+}
+input, button, select {
+ vertical-align: middle;
+ font-size: 100%;
+}
+table, td, blockquote, textarea, input, object, embed, video {
+ max-width: 100%;
+}
+
+/* HTML5 display-role reset for older browsers */
+header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog {
+ display: block;
+}
+
+/*----------------------------------------------*/
+/* 4- Base styles */
+/*----------------------------------------------*/
+body {
+ background-color: black;
+}
+/*----------------------------------------------*/
+/* 5- Video */
+/*----------------------------------------------*/
video {
+ width: 600px;
+ height: 400px;
+}
+/*----------------------------------------------*/
+/* 6- Controls */
+/*----------------------------------------------*/
+#playerContainer {
position: relative;
- width: 1280px;
- height: 720px;
z-index: 1;
}
-#controls {
+#controlContainer {
+ position: absolute;
+ z-index: 10;
+ top: 200px;
+ left: 0;
+ right: 0;
+ height: 40px;
+ overflow: hidden;
+ background-color: blue;
+}
+#controlbar {
position: absolute;
- left: 100px;
- top: 350px;
- z-index: 2;
-
- padding: 25px;
- background: black;
- color: white;
- font-size: 2em;
- font-family: Arial;
-}
\ No newline at end of file
+ /*bottom: -40px;*/
+ bottom: 0;
+ left: 0;
+ height: 40px;
+ padding: 0 50px;
+
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+}
+#controlContainer:hover #controlbar {
+ bottom: 0;
+}
+.bnt {
+ height: 32px;
+ width: 32px;
+ margin-left: 15px;
+ text-indent: -99999px;
+ background-image: url(../img/player_btn.png);
+}
+#controlbar .bnt:first-child {
+ margin-left: 0;
+}
+#btnPlay {
+ background-position: 0 -32px;
+}
+#btnPlay:hover,
+#btnPlay:focus {
+ background-position: 0 0;
+}
+#btnPaused {
+ background-position: 32px -32px;
+}
+#btnPaused:hover,
+#btnPaused:focus {
+ background-position: 32px 0;
+}
+#btnBck {
+ background-position: -96px -32px;
+}
+#btnBck:hover,
+#btnBck:focus {
+ background-position: -96px 0;
+}
+#btnFwd {
+ background-position: -64px -32px;
+}
+#btnFwd:hover,
+#btnFwd:focus {
+ background-position: -64px 0;
+}
+#btnFullScr {
+ background-position: -132px -32px;
+ width: 48px;
+ }
+#btnFullScr:hover,
+#btnFullScr:focus {
+ background-position: -132px 0;
+}
+#btnHD {
+ background-position: -180px -32px;
+ width: 52px;
+}
+#btnHD:hover,
+#btnHD:focus {
+ background-position: -180px 0;
+}
+
+/*----------------------------------------------*/
+/* 9- Footer */
+/*----------------------------------------------*/
+
+
+
+
Binary file web/static/res/img/player_btn.png has changed
--- a/web/static/res/js/incplayer.js Thu Oct 04 20:39:57 2012 +0200
+++ b/web/static/res/js/incplayer.js Fri Oct 05 13:44:45 2012 +0200
@@ -296,6 +296,7 @@
this.displayPlayButton = function(playIcon)
{
+ /*
if (playIcon) {
// Controller display
this.playButton.src = 'static/res/img/ctrlplayover.jpg';
@@ -307,6 +308,7 @@
this.playButton.onmouseover = function() {this.src='static/res/img/ctrlpauseover.jpg';};
this.playButton.onmouseout = function() {this.src='static/res/img/ctrlpause.jpg';};
}
+ */
};
// --------------------------------------------------------------------------------------------------------------------
