Video dosen't play at all. [JavaScript]

Question

Im trying to read a local file with videos. Here is the code. I used array to add the videos and play it in sequence but it didn't play any video.

 var videos = new Array(); //("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
var currentVideo = 0;

function nextVideo() {
    // get the element
    videoElement = document.getElementById("play-video");
    // remove the event listener, if there is one
    videoElement.removeEventListener('ended', nextVideo, false);

    // update the source with the currentVideo from the videos array
    videoElement.src = videos[currentVideo];
    // play the video

    videoElement.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoElement.addEventListener('ended', nextVideo, false);
}

function yesnoCheck() {
    document.getElementById("filepicker").style.display = 'none';
}

// add change event to pick up selected files
document.getElementById("filepicker").addEventListener("change", function (event) {

    var files = event.target.files;
    // loop through files
    for (var i = 0; i < files.length; i++) {
        // select the filename for any videos
        if (files[i].type == "video/mp4") {
            // add the filename to the array of videos
            videos.push(files[i].name); // work from webkitRelativePath;
        }
    };

    // once videos are loaded initialize and play the first one
    nextVideo();

}, false);

Any suggestions? Thank you.

Answer 1

You're going to have to read the contents of the video, not just set the src to it's name. You can do so by using the FileReader.

I've adjusted your code, but I haven't tested it. Here's a working example on JsFiddle, though.

var videos = new Array(); //("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
var currentVideo = 0;
var reader = new FileReader();
// get th eelement
var videoElement = document.getElementById("play-video");


function nextVideo() {
    // remove the event listener, if there is one
    videoElement.removeEventListener('ended', nextVideo, false);

    // read the file contents as a data URL
    reader.readAsDataURL(videos[currentVideo]);

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoElement.addEventListener('ended', nextVideo, false);
}

function yesnoCheck() {
    document.getElementById("filepicker").style.display = 'none';
}

// add change event to pick up selected files
document.getElementById("filepicker").addEventListener("change", function (event) {

    var files = event.target.files;
    // loop through files
    for (var i = 0; i < files.length; i++) {
        // select the filename for any videos
        if (files[i].type == "video/mp4") {
            // add the whole file to the array
            videos.push(files[i]);
        }
    };
    // once videos are loaded initialize and play the first one
    nextVideo();

}, false);
// once the file is fully read
reader.addEventListener('load', function() {
    // you have the data URL in reader.result
    videoElement.src = reader.result;
    // play the video
    videoElement.play()
});