Author: andre
Date: 2010-03-04 12:24:47 +0100 (Thu, 04 Mar 2010)
New Revision: 41257
Modified:
openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
openimages/trunk/src/main/webapp/oiplayer/index.html
Log:
new and reordering css styles
Modified: openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-04
11:13:28 UTC (rev 41256)
+++ openimages/trunk/src/main/webapp/oiplayer/css/oiplayer.css 2010-03-04
11:24:47 UTC (rev 41257)
@@ -5,39 +5,48 @@
* @version '$Id$'
*/
-body.oiplayer-example
+/* MSIE Java plugin detection, sigh :-( */
+#clientcaps
{
- font-size: small;
- font-family: Helvetica, sans-serif;
- background-color: #efefef;
- line-height: 1.4em;
+ behavior: url(#default#clientCaps);
+ display: none;
}
-body.oiplayer-example > div.main
+div.oiplayer { width: 320px; }
+div.oiplayer.fullscreen
{
- width: 620px;
- margin: 0 auto;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
background-color: #fff;
- padding: 1px 1em;
}
-body.oiplayer-example > div.main ol { padding-left: 20px; }
-
-#clientcaps /* used by MSIE Java plugin detection, sigh :-( */
+div.oiplayer > div.player,
+div.oiplayer div.oiplayer-flash
{
- behavior: url(#default#clientCaps);
- display: none;
+ position: relative;
+ height: 240px;
+ margin: 0 0 8px 0;
+ padding: 0;
}
-div.oiplayer
+/* div.oiplayer div.oiplayer-flash { position: relative; } */
+
+div.oiplayer > div.controls
{
+ height: 24px;
+ margin: 0;
position: relative;
- margin: 0 0 12px 0;
- padding: 0;
- height: 240px;
+ top: 0px; /* make -32px to float on top video */
+ left: 0;
+ z-index: 99;
+ background-image: url(images/controls-whitie.png);
+ background-repeat: repeat;
}
-div.oiplayer img.oipreview
+div.oiplayer > div.player > img
{
position: absolute;
margin: 0;
@@ -45,11 +54,6 @@
z-index: 9;
}
-div.oiplayer div.oiplayer-flash
-{
- position: relative;
-}
-
div.oiplayer audio, #msie_cortadoplayer_oiplayer
{
position: absolute;
@@ -77,13 +81,10 @@
margin: 0 auto;
}
+/* controls */
ul.controls
{
- width: 320px;
height: 25px;
- margin-bottom: 6px;
- margin: 10px 0;
- height: 25px;
list-style: none;
display: inline;
overflow: hidden;
@@ -99,7 +100,6 @@
ul.controls a
{
- float: left;
padding: 25px 0 0 0;
overflow: hidden;
height: 0 !important;
@@ -112,41 +112,113 @@
{
background-image: url(images/controls-play.png);
width: 21px;
- margin-left: 0;
+ margin-left: -2px;
+ float: left;
}
ul.controls li.play.pause a
{
background-image: url(images/controls-pause.png);
width: 21px;
- margin-left: 0;
+ margin-left: -2px;
+ float: left;
}
ul.controls li.position
{
- width: 24px;
- margin: 0 0 0 10px;
font-family: Monaco, Courier, monospaced;
+ color: #555;
line-height: 2em;
+ margin-left: 10px;
+ float: left;
}
div.playerinfo { font-size: xx-small; }
ul.controls li.sound a
{
+ float: right;
background-image: url(images/controls-soundon.png);
+ background-repeat: no-repeat;
width: 23px;
+ margin-left: 6px;
+}
+
+ul.controls li.sound.off a
+{
+ float: right;
+ background-image: url(images/controls-soundoff.png);
background-repeat: no-repeat;
- float: right;
- margin: 0 4px;
+ width: 23px;
+ margin-left: 6px;
}
ul.controls li.screen a
{
+ float: right;
background-image: url(images/controls-fullscreen.png);
+ background-repeat: no-repeat;
width: 23px;
- margin: 0 4px;
- background-repeat: no-repeat;
- float: right;
+ margin-left: 6px;
}
+ul.controls li.slider
+{
+ float: left;
+ margin-left: 18px;
+ background: url(images/controls-slidestart.png) top left no-repeat;
+ width: 160px;
+}
+
+ul.controls li.slider > div { width: 150px; }
+
+/* ### jquery-ui ### */
+.ui-slider { position: relative; }
+
+.ui-slider-horizontal .ui-slider-handle {
+ top: 0;
+}
+
+.ui-slider .ui-slider-handle
+{
+ cursor: pointer;
+ height: 25px;
+ position: absolute;
+ width: 11px;
+ z-index: 2;
+}
+
+.ui-widget-content
+{
+ border: 0;
+ background: url(images/controls-slidelong.png) top right no-repeat;
+ height: 25px;
+ margin-left: 10px;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default
+{
+ border: 0;
+ background-color: transparent;
+ background: url(images/controls-position.png) top left no-repeat;
+ margin-left: -10px;
+}
+
+/* ### example html ### */
+body.oiplayer-example
+{
+ font-size: small;
+ font-family: Helvetica, sans-serif;
+ background-color: #efefef;
+ line-height: 1.4em;
+}
+
+body.oiplayer-example > div.main
+{
+ width: 620px;
+ margin: 0 auto;
+ background-color: #fff;
+ padding: 1px 1em;
+}
+
+body.oiplayer-example > div.main ol { padding-left: 20px; }
Modified: openimages/trunk/src/main/webapp/oiplayer/index.html
===================================================================
--- openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-04
11:13:28 UTC (rev 41256)
+++ openimages/trunk/src/main/webapp/oiplayer/index.html 2010-03-04
11:24:47 UTC (rev 41257)
@@ -8,7 +8,7 @@
<script src="plugins/flowplayer-3.1.4.min.js" type="text/javascript"><!--
help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie
--></script>
<script src="js/play.js" type="text/javascript"><!-- help ie --></script>
- <link href="css/oiplayer2.css" rel="stylesheet" type="text/css" />
+ <link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
</head>
<body class="oiplayer-example">
@@ -18,12 +18,9 @@
<div id="clientcaps"> </div> <!-- div#clientcaps is needed for Java
detection in MSIE -->
<video controls="controls"
poster="http://www.openimages.eu/images/18489/WEEKNUMMER364-HRE0000D9C6.png";>
- <source type="video/ogg; codecs=theora" src="presto.ogv"> </source>
-<!--
<source type="video/ogg; codecs=theora"
src="http://www.openimages.eu/files/09/9734.9730.WEEKNUMMER364-HRE0000D9C6.ogv";>
</source>
<source type="video/ogg; codecs=theora"
src="http://www.openimages.eu/files/09/9737.9730.WEEKNUMMER364-HRE0000D9C6.ogv";>
</source>
<source type="video/mp4; codecs=unknown"
src="http://www.openimages.eu/files/09/9740.9730.WEEKNUMMER364-HRE0000D9C6.mp4";>
</source>
- -->
</video>
<p>
@@ -63,6 +60,7 @@
<li>server: webserver (msie (or windows java) has issues with finding
directories)</li>
<li>jar: location of Cortado jar</li>
<li>flash: location of Flowplayer and its files</li>
+ <li>controls: show controls or not</li>
</ul>
These examples point to files on www.openimages.eu and should normally
work with our
media files.
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
![http://www.openimages.eu/images/18489/WEEKNUMMER364-HRE0000D9C6.png"](http://www.openimages.eu/images/18489/WEEKNUMMER364-HRE0000D9C6.png"){kind=link}