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.

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

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

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

Nach dem <BODY> Tag

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 «