Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@ZaneHannanAU @chrisdavidmills
111 lines (95 sloc) 3.16 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Abort APi example</title>
<style>
.wrapper {
width: 70%;
max-width: 800px;
margin: 0 auto;
}
video {
max-width: 100%;
}
.videoWrapper, .abort {
display: none;
}
progress {
display: block;
width: 100%;
}
div div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Simple offline video player</h1>
<div class="controls">
<button class="download">Download video</button>
<button class="abort">Cancel download</button>
<p class="reports"></p>
</div>
<div class="videoWrapper">
<p>Sintel © copyright Blender Foundation | <a href="http://www.sintel.org/">www.sintel.org</a>.</p>
</div>
</div>
</body>
<script>
var url = 'sintel.mp4';
var controller, signal;
var videoWrapper = document.querySelector('.videoWrapper');
var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');
var reports = document.querySelector('.reports');
var progressAnim;
var animCount = 0;
downloadBtn.addEventListener('click', fetchVideo);
abortBtn.addEventListener('click', function() {
controller.abort();
console.log('Download aborted');
downloadBtn.style.display = 'inline';
});
function fetchVideo() {
controller = new AbortController;
signal = controller.signal;
downloadBtn.style.display = 'none';
abortBtn.style.display = 'inline';
reports.textContent = 'Video awaiting download...';
fetch(url, {signal}).then(function(response) {
runAnimation();
setTimeout(() => console.log('Body used: ', response.bodyUsed), 1)
return response.blob().finally(() => {
clearInterval(progressAnim);
progressAnim = undefined;
controller = undefined;
signal = undefined;
animCount = 0;
}).then(function(myBlob) {
var video = document.createElement('video');
video.setAttribute('controls', '');
video.src = URL.createObjectURL(myBlob);
videoWrapper.appendChild(video);
videoWrapper.style.display = 'block';
abortBtn.style.display = 'none';
downloadBtn.style.display = 'none';
reports.textContent = 'Video ready to play';
});
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}
function runAnimation() {
progressAnim = setInterval(function() {
switch (animCount++ & 3) {
case 0: reports.textContent = 'Download occuring; waiting for video player to be constructed'; break;
case 1: reports.textContent = 'Download occuring; waiting for video player to be constructed.'; break;
case 2: reports.textContent = 'Download occuring; waiting for video player to be constructed..'; break;
case 3: reports.textContent = 'Download occuring; waiting for video player to be constructed...'; break;
}
}, 300);
}
</script>
</html>
You can’t perform that action at this time.