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

视频根本没玩。 [JavaScript的]

1 个答案: