用于本地文件系统的CreateObjectURL

时间:2014-10-22 17:21:12

标签: javascript html5

为什么会发现"没有找到功能"错误?

block head


script.
   function convert_local_file()  {
    var URL = window.URL || window.webkitURL
     , file = this.file; 
    var value = window.webkitURL.createObjectURL("file:///home/sanika/NodeJS/Projects/project1/routes/../videosTrans/Node.js tutorial for beginners - an introduction to Node.js with Express2.js.mp4"); 
    return value; 
   }


block content
      video(id="videolink" width="400" height="320" type="video/mp4" controls)
       script.
             document.getElementById('videolink').src = convert_local_file();   

IMAGE:  enter image description here

1 个答案:

答案 0 :(得分:0)

我不确定你的最终目标是什么,但你在函数中对createObjectURL的引用可能不正确。您要做的是使用输入标记获取本地文件。

class LocalFileVideoPlayer {
    constructor(input, video) {
        this.input = input;
        this.video = video;
        this.input.addEventListener('change', this.onChange, false);
    }

    static createObjectURL(obj) {
        return (URL || webkitURL).createObjectURL(obj);
    }

    onChange = () => {
        const [file] = this.input.files;
        if (!file) {
            alert('No file selected');
            return;
        }
        if (!this.video.canPlayType(file.type)) {
            alert('Cannot play video of type ' + file.type);
            return;
        }
        this.playVideo(file);
    }

    destroy = () => {
        this.input.removeEventListener('change', this.onChange, false);
        this.input = null;
        this.video = null;
    }

    playVideo = (file) => {
        var url = LocalFileVideoPlayer.createObjectURL(file);
        this.video.src = url;
    }
}

var localFileVideoPlayer = new LocalFileVideoPlayer(
    document.querySelector('input'),
    document.querySelector('video')
);
video, input {
  display: block;
}
<input type="file" accept="video/*" />
<video controls autoplay></video>