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.
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>
<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 «