how to Preview the video file that user wants to upload on the website (PHP, FiileAPI JS)

Question

I mean, when a user chooses the video file from their system, have the web-page already show them the files they want to upload.

I'm already using image file to preview using FileAPI JS. The same I want to do with FileAPI JS for video file.

(So, It must be work within my client side)

Thanks & answers are appreciated :)

Answer 1

You can either use FileReader or createObjectURL. They'll both get the job done, but FileReader has slightly broader support in browsers.

createObjectURL will run synchronously and return a Blob URL, a short string referencing the file in memory. and you can free it up immediately after you're done using it.

FileReader will run asynchronously, requiring a callback, providing a Data URI, a much longer string representing the whole file. This can be very big and will be freed from memory in Javascript garbage collection.

Here's an example that first tries createObjectURL and falls back to FileReader. (Please provide your own error checking, etc.)

var video = document.getElementById('video'),
    input = document.getElementById('input');

input.addEventListener('change', function (evt) {
    var reader = new window.FileReader(),
        file = evt.target.files[0],
        url;

        reader = window.URL || window.webKitURL;

    if (reader && reader.createObjectURL) {
        url = reader.createObjectURL(file);
        video.src = url;
        reader.revokeObjectURL(url);  //free up memory
        return;
    }

    if (!window.FileReader) {
        console.log('Sorry, not so much');
        return;
    }

    reader = new window.FileReader();
    reader.onload = function(evt) {
       video.src = evt.target.result;
    };
    reader.readAsDataURL(file);
}, false);

Working example here: http://jsbin.com/isodes/1/edit

Mozilla has a more detailed article with instructions on how to upload once you've got your file.

IE10 supports both, but IE9 supports neither, so you'll have to fall back to a regular form upload without a preview.