如何让用户在他们的计算机上加载和播放 MP4 文件？

Question

我的 Web 项目使用 node.js / HTML / JavaScript，有一个视频播放器元素，我希望用户能够单击一个按钮来播放 MP4网页上的文件。我该怎么做？

这是我的一些示例代码，其中包含视频元素，我可以让用户浏览他们的文件。用户的视频文件是否必须上传到我的服务器？我希望他们只在浏览器中播放他们已经保存在计算机上的视频。

我的项目文件目录中已有其他视频，我 video.src = ... 在它们之间进行切换。所以我希望能想出类似的东西来播放用户自己的视频。

<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>

最近的尝试

这是我的处理程序中的相关代码，经过一些修改。单击输入元素后，它让我 select 带有 windows 的文件弹出 gui，这很好。但是视频部分不工作：

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;

});

当select输入有效的 mp4 文件时，我使用此代码遇到的当前错误：

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

我应该如何解决这个问题？

Answer 1

<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>

Answer 2

无需将视频上传到任何地方。你仍然可以设置 video.src;要获取它的值，请使用 URL.createObjectURL method 并将文件传递给它。因此，假设您已经有一个特定的 file 变量（就像在您的 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).

如何让用户在他们的计算机上加载和播放 MP4 文件？

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

html

javascript

video

node.js

最近的尝试