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

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>

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

Вопрос задан 15 окт. 2023
134 просмотра

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);
}

Написано 20 окт. 2023

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

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

Написано 20 окт. 2023

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>

Скриншот:

Написано 21 окт. 2023

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

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

Войти через центр авторизации

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

JavaScript

Простой
Как написать функцию, которая принимает цифру и возвращает число прописью?
- 2 подписчика
- 6 часов назад
- 156 просмотров
1

ответ
JavaScript

Средний
Как удалить элемент из массива в local storage по его индексу?
- 2 подписчика
- 7 часов назад
- 130 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как в консоли Google Chrome, получить имя функции-обработчика конкретного элемента (для `scroll`), чтобы прибить её с помощью `removeEventListener`?
- 1 подписчик
- 9 часов назад
- 24 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- 22 часа назад
- 41 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как разместить и обновлять свой js-скрипт на гитхаб через PHP?
- 1 подписчик
- вчера
- 139 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как получить массив дней месяца, с пн по вс?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
JavaScript

Средний
Как вывести два поля input при определенном option в select в определенном элементе?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- вчера
- 89 просмотров
1

ответ
JavaScript

Простой
Как вытащить значение из функции?
- 1 подписчик
- вчера
- 78 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Исправить ошибку в скрипте расчета стоимости доставки

10 мая 2024, в 16:12

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

Разработка смарт контрактов Web 3.0

10 мая 2024, в 15:43

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

Десктопное приложение для алготрейдинга в сфере криптовалют

04 мая 2024, в 09:38

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

Возможно 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);
}

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

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

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

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