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