blob: 8f953ce40736627c817be5f7f246a8eeb58b9f70 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=../../media-resources/video-test.js></script>
<script src=../../media-resources/media-file.js></script>
<script>
var track;
var cuechangeCount = 0;
var loadCount = 0;
var cueData = [
{"key" : "TIT2", "data" : "Stream Counting"},
{"key" : "TPE1", "data" : "Andy"},
{"key" : "TALB", "data" : "Greatest Hits"},
{"key" : "GEOB", "data" : {}, "type" : "image/png", "info" : "Our Hero", "name" : "abe.png"},
{"key" : "APIC", "data" : {}, "type" : "image/png"},
{"key" : "TXXX", "data" : "Text Blob"},
];
var imageSizes = [ [76, 103], [100, 100] ];
var cue;
function addtrack(event)
{
tracks = event.target;
testExpected("tracks.length", "1");
run("track = video.textTracks[0]");
testExpected("track.kind", "metadata");
testExpected("track.mode", "disabled");
run("track.mode = 'hidden'");
track.addEventListener('cuechange', cuechange, true);
}
function imageLoad()
{
testExpected("imageElement.width", imageSizes[loadCount][0]);
testExpected("imageElement.height", imageSizes[loadCount][1]);
consoleWrite("");
if (++loadCount == 2) {
endTest();
return;
}
testImage(4);
}
function testImage(cueIndex)
{
run("cueImageData = track.cues[" + cueIndex + "].value.data");
testExpected("cueImageData instanceof ArrayBuffer", true);
run("blobUrl = URL.createObjectURL(new Blob([cueImageData], { type: 'image/png' }))");
imageElement = document.querySelector("#photo");
run("imageElement.src = blobUrl");
}
function compareCues(observed, expected)
{
// Make a mutable copy of observed so we can remove attributes as they are processed.
observed = JSON.parse(JSON.stringify(observed));
for (property in expected) {
observedValue = observed[property];
expectedValue = expected[property];
cue.value[property] = observedValue;
observedValue = JSON.stringify(observedValue);
expectedValue = JSON.stringify(expectedValue);
reportExpected(observedValue == expectedValue, `cue.value.${property}`, "==", expectedValue, observedValue);
delete observed[property];
}
for (property in observed) {
observedName = property;
observedValue = observed[property];
logResult(Failed, `Error: unexpected cue property <em>cue.value. ${observedName}</em> = <em>' ${observedValue}'</em>`);
}
}
function cuechange(event)
{
consoleWrite("EVENT(cuechange)");
if (++cuechangeCount != 6)
return;
consoleWrite("<br><em>** Validate cue data</em>");
track.removeEventListener("cuechange", cuechange, true);
video.pause();
for (var i = 0; i < 6; i++) {
consoleWrite(`<em>* ${i + 1}</em>`);
cue = track.cues[i];
testExpected("typeof(cue)", undefined, "!=");
testExpected("cue.type", "org.id3");
testExpected("cue.data", null);
testExpected("cue.value", null, "!=");
if (typeof(cue.value) == undefined) {
failTest(`Error: cue.value is undefined!`);
return;
}
compareCues(cue.value, cueData[i]);
consoleWrite("");
}
consoleWrite("<em>** Extract images from cue data, validate by setting img.src</em>");
imageElement = document.querySelector("#photo");
waitForEvent('load', imageLoad, false, false, imageElement)
testImage(3);
}
function canplaythrough()
{
consoleWrite("<br><em>** Start playback, wait for all cues to load</em>");
run("video.play()");
}
function start()
{
consoleWrite("<br><em>** Set video.src, wait for media data to load</em>");
findMediaElement();
run("video.src = 'http://127.0.0.1:8000/media/resources/hls/metadata/prog_index.m3u8'");
consoleWrite("");
waitForEventOnce("canplaythrough", canplaythrough);
waitForEvent('addtrack', addtrack, false, false, video.textTracks);
}
</script>
</head>
<body onload="start()">
<video controls></video>
<img id=photo>
<p>Test for metadata tracks from Apple HLS stream.</p>
</body>
</html>