blob: da7c1ee42126b0a80983c016b9eab698f157f544 [file] [log] [blame]
<!DOCTYPE html>
<html>
<script>
function once(target, name, cb) {
var p = new Promise(function(resolve, reject) {
target.addEventListener(name, function() {
target.removeEventListener(name, arguments.callee);
resolve();
});
});
if (cb) {
p.then(cb);
}
return p;
}
function fetchWithXHR(uri, onLoadFunction) {
var p = new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", uri, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", () => resolve(xhr.response));
xhr.send();
});
if (onLoadFunction) {
p.then(onLoadFunction);
}
return p;
};
function loadVideo() {
var video = document.getElementsByTagName('video')[0];
var ms = new MediaSource();
video.src = URL.createObjectURL(ms);
video.preload = "auto";
once(ms, 'sourceopen', () => {
var sb = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
ms.duration = Infinity;
fetchWithXHR("video-with-audio-fragmented.mp4", buffer => {
sb.appendBuffer(buffer);
once(sb, "updateend", () => {
video.play();
});
});
});
video.ontimeupdate = () => {
if (video.currentTime > 0.5 && ms.readyState != "ended") {
ms.duration = video.buffered.end(0);
ms.endOfStream();
video.currentTime = 0;
video.play();
}
};
}
</script>
<body onload="loadVideo()">
Ensure that the touchbar will display the time scrubber by the time the video ends.<br/>
See <a href="https://bugs.webkit.org/show_bug.cgi?id=229286">https://bugs.webkit.org/show_bug.cgi?id=229286</a><br/>
<video controls width=640 height=480></video>
</body>
<html>