Блог

Мой веб-проект, используя 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>
 

Последняя попытка

Вот соответствующий код в моем обработчике сейчас, после некоторых изменений. Это позволяет мне выбрать файл с всплывающим графическим интерфейсом Windows после того, как я нажму на элемент ввода, что хорошо. Но видео часть не работает:

 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;

});
 

Текущая ошибка, которую я получаю с этим кодом при выборе допустимого файла mp4:

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

Как мне это исправить?

Нет необходимости загружать видео в любом месте. Вы все еще можете установить video.src ; чтобы получить значение для него, используйте URL.createObjectURL метод и передайте ему файл. Итак, предполагая, что у вас уже есть определенная file переменная (например, в вашем myFunction ):

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

Для экономии памяти, особенно при работе с видео, вы должны вызвать URL.revokeObjectURL objectURL ее, как только она больше не понадобится (например, при выборе другого видео).

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