視頻根本不玩。 [JavaScript]

Question

我試圖用視頻讀取本地文件。這是代碼。我使用數組添加視頻並按順序播放，但它沒有播放任何視頻。

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