New Video Uploader JavaScript Library

Uploading a video to api.video just got easier!

We’ve written a number of posts on how to upload videos to api.video. We have launched demos at upload.a.video and privatelyupload.a.video on how to securely upload videos from the browser.

In the two demos above, we used JavaScript to select the video file, slice it into smaller pieces, and then upload the file to api.video.

We just made it even easier!

We have created a JavaScript uploader script to abstract this code into a single function - allowing you to focus on your code and making the video upload process easier for you and your development team!

JS Uploader Widget

You can read about upload a video in the tutorial describing the code. The JS Uploader widget abstracts the file slice, creating all of the headers, and uploading the files - it also adds retries for segments that have issues! The new code for uploading is under 30 lines, and most of that is for updating the page during the upload. First, we add the script to the head (with a defer tag to not slow page load)

<script src="https://unpkg.com/@api.video/video-uploader" defer></script>

Next we have a event listener for changes in the file upload form:

input.addEventListener('change', () => { console.log("upload commencing"); 
uploadFile(input.files[0]); 
function uploadFile(files) { const uploader = new VideoUploader({ file: input.files[0], 
//changed to sandbox, because we cannot have nice things 
uploadToken: "to5PoOjCz98FdLGnsrFflnYo", 
chunkSize: 1024\*1024\*10, 
// 10MB 
retries: 10 }); 
uploader.onProgress((event) => { 
var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes \* 100); 
var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes \* 100); 
document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
 }) 
uploader.upload() 
.then((video) => { 
console.log(video); 
playerUrl = video.assets.player; 
console.log("all uploaded! Watch here: ",playerUrl ) ; 
document.getElementById("video-information").innerHTML = "all uploaded! Watch the video [here](%5C'%22)" ; }); 
} 
}); 

walking through the code

The uploadFile function takes the files and creates an uploader function:

const uploader = new VideoUploader({ 
file: input.files[0], 
//changed to sandbox, because we cannot have nice things 
uploadToken: "to5PoOjCz98FdLGnsrFflnYo", 
chunkSize: 1024\*1024\*10, 
// 10MB 
retries: 10 }); 

The chunksize defaults to 50MB, but I have lowered this to 10MB for the sake of the demo, so you can see multiple chunks uploaded. The retry count defaults to 5.

During Upload

uploader.onProgress((event) => { var percentComplete = Math.round(event.currentChunkUploadedBytes / event.chunksBytes \* 100); 
var totalPercentComplete = Math.round(event.uploadedBytes / event.totalBytes \* 100); 
document.getElementById("chunk-information").innerHTML = "Chunk # " + event.currentChunk + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";
}) 

The onProgress updates the video upload every 50ms. We calculate the % uploaded, and update the browser - so the user is aware that the video upload is underway.

Upload complete

When the video upload is complete, the API will reply with the videoId, and links to the video. We take this information to display the url to the user:

uploader.upload() .then((video) => { console.log(video); 
playerUrl = video.assets.player; 
console.log("all uploaded! Watch here: ",playerUrl ) ;
document.getElementById("video-information").innerHTML = "all uploaded! Watch the video [here](%5C'%22)" ; }); 

Conclusion

You can try out our library at upload.a.video/JS.html The new JS video uploader widget weighs in at just 11.5 KB, and as it is not required until after the page loads, will not impact your page speed (as long as you use the defer tag). It will make building video upload widgets in JavaScript easier, as we;ve abstracted all the complexity into the library - allowing you to focus on your website, and not on the intricacies of partial uploads of video files. Read all of the technical details in our documentation, and get started with your video app uploads today!