Beispiel:HTML5 video-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>HTML5 video</title>
<style>
video {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>HTML5 video</h1>
<h2>... und sie bewegt sich doch!</h2>
<video id="player" >
<source src="https://wiki.selfhtml.org/local/small.mp4" type="video/mp4">
<source src="https://wiki.selfhtml.org/local/small.ogv" type="video/ogv">
Ihr Browser kann dieses Video nicht wiedergeben.<br>
Dieser Film zeigt eine Demonstration des video-Elements.
Sie können ihn <a href="https://wiki.selfhtml.org/local/small.mp4">hier</a> abrufen.
</video>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="duration">Länge anzeigen</button>
<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>
</body>
</html>
