•  0
    Ajax

    show video from input tags

      Asmin Jismun    160        0        Report content

    <h1>HTML5 local video file player example</h1>
    <div id="message"></div>
    <input type="file" accept="video/*"/>
    <video controls autoplay></video>

    (function localFileVideoPlayerInit(win) {
        var URL = win.URL || win.webkitURL,
            displayMessage = (function displayMessageInit() {
                var node = document.querySelector('#message');

                return function displayMessage(message, isError) {
                    node.innerHTML = message;
                    node.className = isError ? 'error' : 'info';
                };
            }()),
            playSelectedFile = function playSelectedFileInit(event) {
                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;
                }
                var fileURL = URL.createObjectURL(file);
                alert(type);
                videoNode.src = fileURL;
            },
        inputNode = document.querySelector('#fileVideo');               
        if (!URL) {
            displayMessage('Your browser is not supported', true);
            return;
        }  
        inputNode.addEventListener('change', playSelectedFile, false);
    }(window));

     


  •  


Leave a Comment

Please Login to insert comment.

 

Facebook Conversations