CODEWITHSUNDEEP
javascripthtmlnode.jsvideo
JDS
JDS

Reputation: 16978

How to let user load and play an MP4 file on their computer?

My web project, using node.js / HTML / JavaScript, has a video player element, and I want the user to be able to click a button to play an MP4 file on the web page. How would I go about doing this?

Here is some sample code I have, where I have the video element and I can let the user navigate their files. Does the video file of the user have to be uploaded to my server? I want them to just play a video in their browser that they already have saved on their computer.

With other videos already in my project's file directory, I do video.src = ... to change between them. So I am hoping to figure something similar to play the user's own videos.

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<video id="video" playsinline style=" -moz-transform: scaleX(0);
            -o-transform: scaleX(0);
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            display: none;
            ">
            </video>
  
<script>
function myFunction(){
  var x = document.getElementById("myFile");
  var txt = "";
  if ('files' in x) {
    if (x.files.length == 0) {
      txt = "Select one or more files.";
    } else {
      for (var i = 0; i < x.files.length; i++) {
        txt += "<br><strong>" + (i+1) + ". file</strong><br>";
        var file = x.files[i];
        if ('name' in file) {
          txt += "name: " + file.name + "<br>";
        }
        if ('size' in file) {
          txt += "size: " + file.size + " bytes <br>";
        }
      }
    }
  } 
  else {
    if (x.value == "") {
      txt += "Select one or more files.";
    } else {
      txt += "The files property is not supported by your browser!";
      txt  += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
    }
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

Latest attempt

Here is the relevant code in my handler now, after some modifications. It lets me select the file with the windows pop up gui after I click the input element, which is good. But the video part is not working:

document.getElementById("upload_video").addEventListener("change", function() { 

    var file = this;
    console.log('Selected file: ' + file);
    var objectURL = URL.createObjectURL(file);
    //document.getElementById("video").src = objectURL;
    
    if (isVideo(file) == false) { //just checks extension name for e.g. .mp4, .avi, etc
        alert("Error - not a video file.");
        return;
    }
    
    video.src = objectURL;

});

Current error I get with this code when selecting a valid mp4 file:

(console.log) Selected file: [object HTMLInputElement]
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at HTMLInputElement.<anonymous>

How should I fix this?

Upvotes: 0

Views: 1564

Answers (2)

kdau
kdau

Reputation: 2099

No need to upload the video anywhere. You can still set video.src; to get the value for it, use the URL.createObjectURL method and pass the file to it. So, assuming you have a specific file variable already (like in your myFunction):

var objectURL = URL.createObjectURL(file);
document.getElementById("video").src = objectURL;

To save memory, especially with videos, you should call URL.revokeObjectURL on the objectURL once it is no longer needed (e.g., when another video is chosen).

Upvotes: 1

Elvi Xhaferri
Elvi Xhaferri

Reputation: 195

<video width="400" controls>
  <source src="random.mp4" type="video/mp4">
  <source src="random.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

Upvotes: 0

Related Questions