HTML5 Воспроизвести выбранный видеофайл

Сильно запутался с, казалось бы, противоречивой информацией.

Я пытаюсь собрать простой файл выбора и воспроизвести видеоплеер (для последующей потоковой передачи на сервер NodeJs).

У меня большие проблемы с тем, чтобы браузер воспроизвел выбранное видео.

Код здесь:

<script>

function newVideo ()
{
  const mediaStream = new MediaStream();
  const url = URL.createObjectURL(mediaStream);
  var vplayer = document.getElementById('vplayer');
  var vfile = document.getElementById('videoFile');
  console.info(' vfile: ', vfile.files[0].name);
  source.src = mediaStream;
//  source.src = URL.createObjectURL(vfile.files[0].name);
//  source.parent().load();
}

</script>

<video width = "400" controls>
  <source src = "" id = "vplayer">
    Your browser does not support HTML5 video.
</video>

<input type = "file" name = "file[]" id = "videoFile"
       class = "file_multi_video"
       onchange='newVideo();'
       accept = "video/*">

Когда я запускаю это, выбирая видеофайл MP$, я получаю сообщение об ошибке:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at newVideo (video.html:7:19)
    at HTMLInputElement.onchange (video.html:23:114)

Отвечает ли это на ваш вопрос? Не удалось выполнить «createObjectURL» для «URL»:

— 14.04.2023 01:55

javascript mediastream

14.04.2023 01:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Чтобы исправить ошибку, вы можете создать BLOB-объект из выбранного файла. такая штука...

function newVideo() {
  const vplayer = document.getElementById('vplayer');
  const vfile = document.getElementById('videoFile');
  const file = vfile.files[0];
  
  if (file.type.indexOf('video') === -1) {
    console.info('صيغة الملف غير مدعومة');
    return;
  }
  
  const reader = new FileReader();
  reader.onload = function() {
    const blob = new Blob([new Uint8Array(reader.result)]);
    const url = URL.createObjectURL(blob);
    vplayer.src = url;
    vplayer.play();
  };
  reader.readAsArrayBuffer(file);
}

Это не совсем сработало, но большое спасибо за это, так как это дает некоторые полезные указатели.

— 14.04.2023 10:43

14.04.2023 02:19

Ответ принят как подходящий

Вы должны создать URL-адрес для элемента <source>, используя набор файлов во входных данных.

function newVideo ()
{
  var vplayer = document.getElementById('vplayer');
  var vfile = document.getElementById('videoFile');
  console.info(' vfile: ', vfile.files[0].name);
  var source = document.createElement('source')
  source.src = URL.createObjectURL(vfile.files[0]);
  vplayer.replaceChildren(source);
}

<video id = "vplayer" width = "400" controls></video>

<input type = "file" name = "file[]" id = "videoFile"
       class = "file_multi_video"
       onchange='newVideo();'
       accept = "video/*">

Работал! Спасибо. Я немного смущен тем, что я прочитал, MSE - это путь в наши дни. Но я счастлив, что теперь это работает.

— 14.04.2023 10:44

14.04.2023 02:47