HTML5 local video file player example

by NunoMira

HTML

<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay></video>

CSS

video, input
{
    display: block;
}
input
{
    width: 100%;       
}

.info
{
    background-color: aqua;            
}
.error
{
    background-color: red;
    color: white;
}

JavaScript

//Video com HTML5
function displayMessageInit()
{
    var node = document.querySelector('#message');
    return function displayMessage(message, isError)
    {
        node.innerHTML = message;
        node.className = isError ? 'error' : 'info';
    };
};

function localFileVideoPlayerInit(win)
{
    debugger;
    var URL = win.URL || win.webkitURL;
    var displayMessage = displayMessageInit();
        
    var playSelectedFile = function playSelectedFileInit (event)
    {
        debugger;
        var file = this.files[0];
        var type = file.type;
        var videoNode = document.querySelector('video');
        var canPlay = videoNode.canPlayType(type);
        canPlay = (canPlay === '' ? 'no' : canPlay);

        var message = 'Can play type "' + type + '": ' + canPlay;
        var isError = canPlay === 'no';
        displayMessage(message, isError);

        if (isError)
            return;

        //debugger;
        var fileURL = URL.createObjectURL(file);
        videoNode.src = fileURL;
    };
    
    var inputNode = document.querySelector('input');
                                          
    if (!URL)
    {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);
        return;
    }                                                                                                               
    inputNode.addEventListener('change', playSelectedFile, false);
};

localFileVideoPlayerInit(window);