jQuery VideoPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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;
}
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 3 Online
            » 12 Heute
            » 276 Gestern
            » 12 Woche
            » 8778 Monat
            » 42057 Jahr
            » 512725 Gesamt
            Record: 1679 (15.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt