jQuery VideoPlayer - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

jQuery VideoPlayer

Scripte > Multimedia


Videoplayer mit jQuery und CSS3.

jQuery

In Ergänzung zum HTML5 Videoplayer hier eine Möglichkeit Videodateien über jQuery in Verbindung mit CSS3 auszugeben. Der Vorteil liegt darin, über CSS und durch Austauch der Imagedateien seinen eigenen Player individuell gestalten zu können.
Auch hier zwei Varianten, mit breitem und schmalem Rahhmen. Die Videodateien werden im mp4- und ogv-Theora-Format benötigt, damit alle Browser damit zurecht kommen.  
Zip-Datei entpacken und Verzeichnis "jq_videoplayer" auf den Server laden. Dem Zip-Paket liegen Trailer-Videos zum testen bei.

Die wichtigsten Konfigurations-Parameter:
controls = Steuerung (Player-Skin)
autoplay = automatisch abspielen
autobuffer = Pufferung bei Videoaufruf
poster = Startbild zufügen (poster="poster.jpg")

Dark border


Code für den HEAD-Bereich:


<script src="jq_videoplayer/jquery.min.js"></script>
<script src="jq_videoplayer/jquery-ui-custom.min.js"></script>
<link href="jq_videoplayer/jq_videoplayer.css" rel="stylesheet" type="text/css">
<script src="jq_videoplayer/jq_videoplayer.js"></script>
<script>
 $(function() {
 $('#video1').gVideo();  
 $('#video2').gVideo({
 childtheme:'smalldark'
 });
});
</script>


Code für das HTML-Objekt:


<video controls="controls" autobuffer poster="jq_videoplayer/files/big_buck_bunny.jpg" width="480" height="360" id="video1">
<source src="jq_videoplayer/files/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="jq_videoplayer/files/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>


Small border


Code für den HEAD-Bereich:


<script src="jq_videoplayer/jquery.min.js"></script>
<script src="jq_videoplayer/jquery-ui-custom.min.js"></script>
<link href="jq_videoplayer/jq_videoplayer.css" rel="stylesheet" type="text/css">
<script src="jq_videoplayer/jq_videoplayer.js"></script>
<script>
 $(function() {
 $('#video1').gVideo();  
 $('#video2').gVideo({
 childtheme:'smalldark'
 });
});
</script>


Code für das HTML-Objekt:


<video controls="controls" autobuffer poster="jq_videoplayer/files/big_buck_bunny.jpg" width="480" height="360" id="video2">
<source src="jq_videoplayer/files/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="jq_videoplayer/files/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 2 Online
 » 3 Heute
 » 1053 Woche
 » 3754 Monat
 » 61269 Jahr
 » 237569 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü