jQuery VideoPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

jQuery VideoPlayer

Scripte > Multimedia
jQuery HTML5 Videoplayer mit CSS-Steuerung
In Ergänzung zum HTML5 Videoplayer hier eine Möglichkeit Videodateien mit jQuery in Verbindung mit CSS auszugeben. Sollen mehrere und/oder verschiedene Player angezeigt werden, müssen diese im HEAD-Bereich hinzugefügt werden ($('#Obj116_1').gVideo();). Soll dann noch der Controller ausgeblendet werden ergänzt man diese Funktion mit childtheme:'smalldark'. Die Anpassung an die Homepage erfolgt in der Datei "videoplayer.css", wobei hier größte Vorsicht geboten ist. Passe immer nur eine Classifizierung an und teste diese.
Die Videodateien werden im Verzeichnis "files" abgelegt und im HTML-Code angepasst.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.  
Die Videodateien werden im mp4- und ogv-Theora-Format benötigt, damit alle Browser damit zurecht kommen.
Download Button
x runter geladen
Die Videodateien werden im mp4- und ogv-Theora-Format benötigt, damit alle Browser damit zurecht kommen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber nicht durch einen Doppelklick ausgeführt werden.
Beigefügt sind neben den Codes als Textdateien als Zugabe der entsprechenden Theodora-Video-Konverter (ogv).
Über eine kleine Spende für unseren Aufwand würden wir uns sehr freuen.
Die wichtigsten Konfigurations-Parameter:
controls
Steuerung (Player-Skin)

autoplay
automatisch abspielen

autobuffer
Pufferung bei Videoaufruf

poster
Startbild zufügen (poster="poster.jpg")

id
Zuordnung Video-ID im HEAD-Bereich

Controller erscheint bei MouseOver

Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj116_0/videoplayer.css"/>
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj116_0/jquery.min.js"></script>
<script src="wsX5Obj/Obj116_0/jquery-ui-custom.min.js"></script>
<script src="wsX5Obj/Obj116_0/videoplayer.js"></script>
<script>
$(function() {
$('#Obj116_1').gVideo();
$('#Obj116_2').gVideo({
childtheme:'smalldark'
});
});
</script>
Code für den <BODY> Bereich
<video controls="controls" autobuffer poster="wsX5Obj/Obj116_0/files/big_buck_bunny.jpg"
width="380" height="260" id="Obj116_1">
<source src="wsX5Obj/Obj116_0/files/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="wsX5Obj/Obj116_0/files/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

&nbsp;

<video controls="controls" autobuffer poster="wsX5Obj/Obj116_0/files/big_buck_bunny.jpg"
width="380" height="260" id="Obj116_2">
<source src="wsX5Obj/Obj116_0/files/crazy_frog_popcorn.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="wsX5Obj/Obj116_0/files/crazy_frog_popcorn.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Code Datei "videoplayer.css"
.Obj116-player {}
.video-play, .volume-button { cursor: pointer; }
.video-timer { cursor: default; }
/* Simpledark Thema */
.Obj116-player.simpledark {
float: left;
position: relative;
padding: 10px;
border: 5px solid #61625d;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
background: #000000;
background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000));
box-shadow: inset 0 15px 35px #535353;
}
.Obj116-player.simpledark .video-controls {
position: relative;
padding-top: 5px;
float: left;
clear: both;
width: 100%;
}
.Obj116-player.simpledark .video-play,
.Obj116-player.simpledark .video-seek,
.Obj116-player.simpledark .volume-box,
.video-timer { float: left; }
/* Play, Pause */
.Obj116-player.simpledark .video-play {
display: block;
width: 22px;
height: 22px;
margin-right: 15px;
background: url(img/play-icon.png) no-repeat;
opacity: 0.7;
-moz-transition: all 0.2s ease-in-out; /* Firefox */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-out;  /* Opera */
transition: all 0.2s ease-in-out;
}
.Obj116-player.simpledark .paused-button { background: url(img/pause-icon.png) no-repeat; }
.Obj116-player.simpledark video { float: left; }
.Obj116-player.simpledark .video-play:hover { opacity: 1; }
/* Suche */
.Obj116-player.simpledark .video-seek {
position:relative;
width: 285px;
height: 10px;
margin-top: 5px;
border: 1px solid #494949;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #535353;
background-image: -moz-linear-gradient(top, #535353, #333333);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
box-shadow: inset 0 -3px 3px #333333;
}
.Obj116-player.simpledark .video-seek .ui-slider-handle {
width: 15px;
height: 15px;
border: 1px solid #333;
top: -4px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background: #e6e6e6;
background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
box-shadow: inset 0 -3px 3px #d5d5d5;
}
.Obj116-player.simpledark .video-seek .ui-slider-handle.ui-state-hover { background: #fff; }
.Obj116-player.simpledark .video-seek .ui-slider-range {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #4cbae8;
background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
box-shadow: inset 0 -3px 3px #39a2ce;
}
/* Laufzeit */
.Obj116-player.simpledark .video-timer {
margin-top: 5px;
margin-left: 10px;
color: #999;
font-size: 0.7em;
font-weight: bold;
}
/* Lautstärke */
.Obj116-player.simpledark .volume-box {
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
width: 20px;
height: 30px;
color: #fff;
padding: 0px 0px;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-out; /* Opera */
transition: all 0.1s ease-in-out;
}
.Obj116-player.simpledark .volume-box:hover { height: 135px; padding-top: 5px; }
.Obj116-player.simpledark .volume-box:hover .volume-slider {
position: relative;
visibility: visible;
opacity: 1;
}
.Obj116-player.simpledark .volume-slider {
position: relative;
height: 105px;
width: 7px;
left: 4px;
visiblity: hidden;
opacity: 0;
border: 1px solid #444;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #535353;
background-image: -moz-linear-gradient(top, #535353, #333333);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
box-shadow: inset 0 3px 3px #333333;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.1s ease-in-out;  /* Opera */
transition: all 0.1s ease-in-out;
}
.Obj116-player.simpledark .volume-slider .ui-slider-handle {
width: 12px;
height: 12px;
left: -4px;
margin-bottom:-0.6em;
margin-left:0;
border: 1px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background: #e6e6e6;
background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
box-shadow: inset 0 3px 3px #d5d5d5;
}
.Obj116-player.simpledark .volume-slider .ui-slider-handle.ui-state-hover { background: #fff; }
.Obj116-player.simpledark .volume-slider .ui-slider-range {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #e6e6e6;
background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
box-shadow: inset 0 3px 3px #d5d5d5;
}
/* Lautstärke Button */
.Obj116-player.simpledark .volume-button {
position: absolute;
bottom: 0px;
display: block;
width: 22px;
height: 22px;
background: url(img/volume-full-icon.png) no-repeat;
text-indent: -9999px;
opacity: 0.8;
}
.Obj116-player.simpledark .volume-button:hover { opacity: 1; }
.Obj116-player.simpledark .volume-mute { background: url(img/volume-mute-icon.png) no-repeat; }

/* Smalldark Thema */
.Obj116-player.smalldark { padding: 3px; }
.Obj116-player.smalldark video:hover + .video-controls { visibility: visible; opacity: 0.7; }
.Obj116-player.smalldark .video-controls:hover { visibility: visible; opacity: 0.7; }
.Obj116-player.smalldark .video-controls {
position: absolute;
top: 105px;
left: 30px;
width: 300px;
padding: 10px;
border: 1px solid #FF0000;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
background: #000000;
background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
background-image:
-webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000));
opacity: 0;
visibility: hidden;
box-shadow: inset 0 15px 35px #535353;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.1s ease-in-out;  /* Opera */
transition: all 0.1s ease-in-out;
}
.Obj116-player.smalldark .video-seek { width: 200px; }
.Obj116-player.smalldark .volume-box { bottom: 10px; right: 10px; }
.Obj116-player.smalldark .volume-box:hover { height: 105px; }
.Obj116-player.smalldark .volume-slider { height: 80px; }
/* jquery ui styles */
.ui-slider-handle {
position: absolute;
z-index: 2;
display: block;
margin-left:-0.6em;
cursor: default;
outline: none;
}
.ui-slider-range {
display:block;
width:100%;
height:100%;
left:0;
bottom: 0;
border:0 none;
position:absolute;
z-index:1;
}

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt