CODEWITHSUNDEEP
javascripthtml
MindBrain
MindBrain

Reputation: 7768

CreateObjectURL for local file system

Why is there a "No Function was found" error?

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

Upvotes: 3

Views: 4033

Answers (1)

psyrendust
psyrendust

Reputation: 1216

I'm not exactly sure what your end goal is, but your reference to createObjectURL in your function is probably incorrect. What you want to do is grab the local file using an input tag.

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>

Upvotes: 2

Related Questions