Видео вообще не играет. [JavaScript]

Question

Im пытается прочитать локальный файл с видео. Вот код. Я использовал массив, чтобы добавлять видео и воспроизводить его последовательно, но он не воспроизводил видео.

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); 

Любые предложения? Спасибо.

Answer 1

Вам нужно будет прочитать содержимое видео, а не просто установить src на свое имя. Вы можете сделать это, используя FileReader.

Я скорректировал ваш код, но я его не тестировал. Вот пример работы на JsFiddle.

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() 
});