| <!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> |
