Как сделать так, чтобы источник видео менялся в соответствии с выбранным файлом?

Question

Hidden Fronter @AlTerminator

Как сделать так, чтобы источник видео менялся в соответствии с выбранным файлом?

Смена источника видео не работает именно на iOS 6. Выбранное в input видео в теге video появляется с ошибкой. При VarOpt.id = URL.createObjectURL(document.querySelector("input").files[i]); видео вообще не появляется в теге video.

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.5">
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <title>Test</title>
</head>
<body>
<video controls></video>
<input accept="video/*" type="file" onchange="InputSelectFileChange()" multiple>
<select onchange="SelectFileChange()"></select>
<script>

function InputSelectFileChange()
{
  for (var i = 0; i < document.querySelector("input").files.length; i++)
  {
   var VarOpt = document.createElement("option");
   VarOpt.text = document.querySelector("input").files[i].name;
   VarOpt.id = document.querySelector("input").files[i];
   VarOpt.value = document.querySelector("input").files[i].name;
   document.querySelector("select").add(VarOpt);
  }
}

function SelectFileChange()
{
 document.querySelector("video").src = document.querySelector("select")[document.querySelector("select").selectedIndex].id;
 //alert(document.querySelector("input").files[0].name + " " + document.querySelector("input").files[0]);
}
</script>
</body>
</html>

Ошибка на скриншоте:

Вопрос задан более года назад
141 просмотр

3 комментария

Подписаться 1 Средний 3 комментария

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Hidden Fronter @AlTerminator Автор вопроса

не работает. Выдает ошибку 1. Причем для фотографий ваш способ работает, но для видео нет. Выяснил, что работает webkitURL.createObjectURL() только для фото.

function SelectFileChange()
{
  var file = document.querySelector("input").files[document.querySelector("select").selectedIndex];
  
  var reader = new FileReader();
  reader.onload = function(e) {
    document.querySelector("video").src = e.target.result;
  };

  reader.onerror = function(e)
  {
    alert("Ошибка " + e.target.error.code);
  }
  
  reader.readAsDataURL(file);
}

Написано более года назад

Загир Меджидов @Zagir-vip

В данной статье указано

Написано более года назад

Hidden Fronter @AlTerminator Автор вопроса

Загир Меджидов, не работает. Обработчик выдает ошибку 4. Узнал через обработчик события onerror у видео. Сработало через костыль. Видео открывается по прямой ссылке в файловой системе:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.5">
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <title>Test</title>
</head>
<body>

<video controls onerror="VideoOnError()"></video>
<input type="file" onchange="InputFileChange()" multiple>
<select onchange="SelectFileChange()">
 <option selected hidden disabled>Список видео</option>
</select>

<script>

function VideoOnError(e)
{
 alert("Ошибка " + e.target.error.code);
}

function InputFileChange()
{
 for (var i = 0; i < document.querySelector("input").files.length; i++)
 {
  var VarOpt = document.createElement("option");
  VarOpt.text = document.querySelector("input").files[i].name;
  //VarOpt.id = webkitURL.createObjectURL(document.querySelector("input").files[i]);
  VarOpt.id = "/var/mobile/Media/DCIM/100APPLE/" + document.querySelector("input").files[i].name;
  VarOpt.value = document.querySelector("input").files[i].name;
  document.querySelector("select").add(VarOpt);
 }
}

function SelectFileChange()
{
 document.querySelector("video").src = document.querySelector("select")[document.querySelector("select").selectedIndex].id;
}
</script>
</body>
</html>

Скриншот:

Написано более года назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- час назад
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 20 часов назад
- 119 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 171 просмотр
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 105 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 107 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 106 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 714 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Преобразователь 0-10В в 4-20мА, питание 24В

25 нояб. 2024, в 17:47

5000 руб./за проект

UX/UI для мед приложения 55 экранов

25 нояб. 2024, в 17:44

100000 руб./за проект

Доработать админскую часть: Angular

25 нояб. 2024, в 17:04

1000 руб./в час

Возможно IOS 6 не поддерживает данный код. Зачем вам адаптировать ваше приложение для старых платформ которые уже не используются?
Загир Меджидов, хочу, чтобы мой планшет на iOS 6 тоже поддерживал данное веб-приложение.
AlTerminator, Я отправлю как ответ на вопрос.

Answer 1 · 2023-10-15 20:37:10

AlTerminator, Поискал на просторах интернета, а нашёл, что IOS 6 не поддерживает "URL.createObjectURL()"

Используйте: FileReader.

function SelectFileChange()
{
  var file = document.querySelector("input").files[document.querySelector("select").selectedIndex];
  
  var reader = new FileReader();
  reader.onload = function(e) {
    document.querySelector("video").src = e.target.result;
  };
  
  reader.readAsDataURL(file);
}

Как сделать так, чтобы источник видео менялся в соответствии с выбранным файлом?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт