124 lines
4.3 KiB
HTML
124 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Local Site — Media</title>
|
|
<link rel="stylesheet" href="assets/site.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Media Page</h1>
|
|
<nav><a href="index.html">Home</a></nav>
|
|
</header>
|
|
<main>
|
|
<h2>SVG image</h2>
|
|
<img src="assets/pic.svg" alt="svg" width="300">
|
|
|
|
<h2>Inline SVG</h2>
|
|
<svg width="120" height="60" viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="120" height="60" fill="#36c"/>
|
|
<text x="60" y="36" text-anchor="middle" fill="white" font-family="sans-serif">Inline SVG</text>
|
|
</svg>
|
|
|
|
<h2>Video (local MP4 source)</h2>
|
|
<video controls width="480" poster="assets/pic.svg" id="vid">
|
|
<source src="assets/sample.mp4" type="video/mp4">
|
|
Your browser does not support video.
|
|
</video>
|
|
<p>Video readyState: <span id="video-ready">0</span></p>
|
|
<p>Video networkState: <span id="video-net">0</span></p>
|
|
<p>Video status: <span id="video-status">not loaded</span></p>
|
|
<p>Video duration: <span id="video-dur">—</span> seconds</p>
|
|
<p>Video dimensions: <span id="video-dim">—</span></p>
|
|
|
|
<h2>Audio (local M4A source)</h2>
|
|
<audio controls id="aud">
|
|
<source src="assets/Neon%20Dream.m4a" type="audio/mp4">
|
|
Your browser does not support audio.
|
|
</audio>
|
|
<p>Audio readyState: <span id="audio-ready">0</span></p>
|
|
<p>Audio networkState: <span id="audio-net">0</span></p>
|
|
<p>Audio status: <span id="audio-status">not loaded</span></p>
|
|
<p>Audio duration: <span id="audio-dur">—</span> seconds</p>
|
|
|
|
<h2>Object & embed</h2>
|
|
<object data="assets/pic.svg" type="image/svg+xml" width="200"></object>
|
|
<embed src="assets/pic.svg" width="200" type="image/svg+xml">
|
|
|
|
<h2>Missing video (error event test)</h2>
|
|
<video controls width="320" id="vid-missing">
|
|
<source src="assets/does-not-exist.mp4" type="video/mp4">
|
|
</video>
|
|
<p>Missing video status: <span id="vid-missing-status">not loaded</span></p>
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
var v = document.getElementById('vid');
|
|
var a = document.getElementById('aud');
|
|
var vm = document.getElementById('vid-missing');
|
|
|
|
function updateVideo() {
|
|
document.getElementById('video-ready').textContent = v.readyState;
|
|
document.getElementById('video-net').textContent = v.networkState;
|
|
if (v.readyState >= 1) {
|
|
document.getElementById('video-dur').textContent = v.duration ? v.duration.toFixed(1) : '—';
|
|
}
|
|
if (v.videoWidth > 0) {
|
|
document.getElementById('video-dim').textContent = v.videoWidth + 'x' + v.videoHeight;
|
|
}
|
|
}
|
|
|
|
if (v) {
|
|
v.addEventListener('loadeddata', function () {
|
|
document.getElementById('video-status').textContent = 'loaded';
|
|
updateVideo();
|
|
});
|
|
v.addEventListener('loadedmetadata', function () {
|
|
updateVideo();
|
|
});
|
|
v.addEventListener('canplay', function () {
|
|
document.getElementById('video-status').textContent = 'can play';
|
|
updateVideo();
|
|
});
|
|
v.addEventListener('error', function () {
|
|
document.getElementById('video-status').textContent = 'ERROR';
|
|
});
|
|
v.addEventListener('stalled', function () {
|
|
document.getElementById('video-status').textContent = 'stalled';
|
|
});
|
|
}
|
|
|
|
if (a) {
|
|
a.addEventListener('loadeddata', function () {
|
|
document.getElementById('audio-status').textContent = 'loaded';
|
|
document.getElementById('audio-ready').textContent = a.readyState;
|
|
document.getElementById('audio-net').textContent = a.networkState;
|
|
});
|
|
a.addEventListener('loadedmetadata', function () {
|
|
document.getElementById('audio-ready').textContent = a.readyState;
|
|
document.getElementById('audio-net').textContent = a.networkState;
|
|
if (a.duration) {
|
|
document.getElementById('audio-dur').textContent = a.duration.toFixed(1);
|
|
}
|
|
});
|
|
a.addEventListener('canplay', function () {
|
|
document.getElementById('audio-status').textContent = 'can play';
|
|
});
|
|
a.addEventListener('error', function () {
|
|
document.getElementById('audio-status').textContent = 'ERROR';
|
|
});
|
|
}
|
|
|
|
if (vm) {
|
|
vm.addEventListener('error', function () {
|
|
document.getElementById('vid-missing-status').textContent = 'ERROR (error event fired)';
|
|
});
|
|
vm.addEventListener('loadstart', function () {
|
|
document.getElementById('vid-missing-status').textContent = 'loadstart fired';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|