HTML5 JS VideoPlayer - Website X5 Helpsite

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

HTML5 JS VideoPlayer

Scripte > Multimedia
Videoplayer mit Javascript Steuerelementen
Hier nun eine Möglichkeiten HTML5 Videos mit Javascript Steuerung auf einfachster Weise in die Homepage einzubinden. So kann man die Steuerelemente selbst gestalten und der Homepage entsprechend anpassen. Auch eine Überschrift kann entsprechend eingefügt sowie auch die Länge des Videos über einen Button kann ausgegeben werden.
Die Browser können von Haus her bereits mit Videoformaten umgehen. So kann Firefox Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Der dazugehörige Ton muss als Vorbis vorliegen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. Head-Code <head>...</head> in den HEAD-Bereich HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
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 auch durch einen Doppelklick ausgeführt werden.
Download Button
x runter geladen
Die wichtigsten Konfigurations-Parameter:
controls
Steuerung (Player-Skin)

autoplay
automatisch abspielen

autobuffer
Pufferung bei Videoaufruf

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

Big Bug Bunny - Das Video

Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj180_0/style.css">
Code für den <BODY> Bereich
<div align="center">
<p class="Obj180_txt">Big Bug Bunny - Das Video</p>
<video id="player" autobuffer poster="wsX5Obj/Obj180_0/big_buck_bunny.jpg" width="480" height="360">
<source src="wsX5Obj/Obj180_0/big_buck_bunny.mp4" type="video/mp4">
<source src="wsX5Obj/Obj180_0/big_buck_bunny.ogv" type="video/ogv">
Ihr Browser kann dieses Video nicht wiedergeben.<br>
Sie können das Video<a href="wsX5Obj/Obj180_0/big_buck_bunny.mp4"> hier </a>abrufen.
</video>
<p align="center">
<button class="Obj180_btn" id="play">Play</button>
<button class="Obj180_btn" id="pause">Pause</button>
<button class="Obj180_btn" id="duration">Länge anzeigen</button>
</p>
<p id="ausgabe"></p>
<script>
var song = document.getElementById('player');
document.getElementById('play')
.addEventListener('click', function () {
song.play();
}, false);
document.getElementById('pause')
.addEventListener('click', function () {
song.pause();
}, false);
document.getElementById('duration')
.addEventListener('click', function () {
document.getElementById('ausgabe')
.innerHTML = 'Die Dauer des Videos beträgt: ' + song.duration + ' Sekunden.'
}, false);
</script>
</div>
Code Datei "style.css"
video { display: block; margin: 10px; }
.Obj180_txt { color: #7C6031; font-size: 20px; font-weight: bold; font-family: Verdana,tahoma,Arial; }
.Obj180_btn { color: #7C6031; font-size: 13px; font-weight: bold; font-family: tahoma,Arial; background-color: #B4DA9F;
border: 1px solid #7C6031; border-radius: 3px; }
.Obj180_btn:hover { background-color: #D2E7C5; }

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