Skip to content

Commit

Permalink
Use switch, srcObject. Attempt to make video download not one time.
Browse files Browse the repository at this point in the history
ZaneHannanAU authored Sep 20, 2018
1 parent 0cbbfe6 commit c11f4bc
Showing 1 changed file with 21 additions and 20 deletions.
41 changes: 21 additions & 20 deletions abort-api/index.html
Original file line number Diff line number Diff line change
@@ -45,8 +45,7 @@ <h1>Simple offline video player</h1>
<script>
var url = 'sintel.mp4';

var controller = new AbortController();
var signal = controller.signal;
var controller, signal;

var videoWrapper = document.querySelector('.videoWrapper');
var downloadBtn = document.querySelector('.download');
@@ -61,20 +60,30 @@ <h1>Simple offline video player</h1>
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 downloading';
reports.textContent = 'Video awaiting download...';
fetch(url, {signal}).then(function(response) {
runAnimation();
response.blob().then(function(myBlob) {
setTimeout(() => console.log('Body used: ', response.bodyUsed), 1)
return response.blob().finally(() => {
clearInterval(progressAnim);
var objectURL = URL.createObjectURL(myBlob);

progressAnim = undefined;
controller = undefined;
signal = undefined;
animCount = 0;
}).then(function(myBlob) {
var video = document.createElement('video');
video.setAttribute('controls', '');
video.src = objectURL;
if ('srcObject' in video)
video.srcObject = myBlob;
else video.src = URL.createObjectURL(myBlob);
videoWrapper.appendChild(video);

videoWrapper.style.display = 'block';
@@ -83,26 +92,18 @@ <h1>Simple offline video player</h1>

reports.textContent = 'Video ready to play';
});
console.log(response.bodyUsed);
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}

function runAnimation() {
progressAnim = setInterval(function() {
if(animCount === 0) {
reports.textContent = 'Download complete; waiting for video player to be constructed';
animCount++;
} else if(animCount === 1) {
reports.textContent = 'Download complete; waiting for video player to be constructed.';
animCount++;
} else if(animCount === 2) {
reports.textContent = 'Download complete; waiting for video player to be constructed..';
animCount++;
} else {
reports.textContent = 'Download complete; waiting for video player to be constructed...';
animCount = 0;
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);
}

0 comments on commit c11f4bc

Please sign in to comment.