<!DOCTYPE html>
<html>
<body>
<audio autoplay controls>
<source src="audio/beethoven.ogg" type="audio/ogg">
<source src="audio/beethoven.mp3" type="audio/mpeg">
<source src="audio/beethoven.wav" type="audio/wav">
</audio>
</body>
</html>Příklad 2 - Video s tlačítkama definovaný pomocí JavaScriptu
HTML5 kód:
<!DOCTYPE html>
<html>
<body>
<button onclick="playPause()">Pusť/Stop /button>
<button onclick="makeBig()">Velký /button>
<button onclick="makeSmall()">Malý /button>
<button onclick="makeNormal()">Akorát /button>
<br />
<video id="video1" width="420">
<source src="video/prezentace.mp4" type="video/mp4">
<source src="video/prezentace.ogg" type="video/ogg">
<source src="video/prezentace.webm" type="video/webm">
</video>
</body>
</html>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)myVideo.play();
else myVideo.pause(); }
function makeBig() { myVideo.width=640; }
function makeSmall() { myVideo.width=320; }
function makeNormal() { myVideo.width=480; }
</script>Příklad 3 - Definované výpočty
HTML5 kód:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="0">100 +
<input type="number" id="b" value="2">=
<output name="x" for="a b"></output>
</form>
<br />
<br />
<form oninput="x.value=parseInt(a.value)-parseInt(b.value)">0
<input type="range" id="a" value="50">100 -
<input type="number" id="b" value="2">=
<output name="x" for="a b"></output>
</form>
<br />
<br />
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)">0
<input type="range" id="a" value="0">100 *
<input type="number" id="b" value="2">=
<output name="x" for="a b"></output>
</form>
<br />
<br />
<form oninput="x.value=parseInt(a.value)/parseInt(b.value)">0
<input type="range" id="a" value="50">100 /
<input type="number" id="b" value="2">=
<output name="x" for="a b"></output>
</form>Příklad 4 - Stíny pomocí canvas
HTML5 kód:
<canvas id="canvas-one" width="600" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas-one');
var context = canvas.getContext('2d');
context.rect(188, 40, 200, 100);
context.fillStyle = '#FF8000';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
</script>Příklad 5 - Canvas mrak pomocí Bézierovy křivky
HTML5 kód:
<canvas id="canvas-two" width="600" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas-two');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'lightblue';
context.stroke();
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
</script>