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

HTML JavaScript

26 февраля 2026 1 ответ

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

&lt;!DOCTYPE html&gt; &lt;html lang="ru"&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;  &lt;meta name="viewport" content="width=device-width, initial-scale=1.5"&gt;  &lt;meta name="apple-mobile-web-app-capable" content="yes"/&gt;  &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;video controls&gt;&lt;/video&gt; &lt;input accept="video/*" type="file" onchange="InputSelectFileChange()" multiple&gt; &lt;select onchange="SelectFileChange()"&gt;&lt;/select&gt; &lt;script&gt;  function InputSelectFileChange() {   for (var i = 0; i &lt; 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]); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

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

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

Дополнительно:

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

Загир Меджидов, хочу, чтобы мой планшет на iOS 6 тоже поддерживал данное веб-приложение.

AlTerminator, Я отправлю как ответ на вопрос.

Ответы:

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

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

не работает. Выдает ошибку 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); }

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

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

&lt;!DOCTYPE html&gt; &lt;html lang="ru"&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;  &lt;meta name="viewport" content="width=device-width, initial-scale=1.5"&gt;  &lt;meta name="apple-mobile-web-app-capable" content="yes"/&gt;  &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt;  &lt;video controls onerror="VideoOnError()"&gt;&lt;/video&gt; &lt;input type="file" onchange="InputFileChange()" multiple&gt; &lt;select onchange="SelectFileChange()"&gt;  &lt;option selected hidden disabled&gt;Список видео&lt;/option&gt; &lt;/select&gt;  &lt;script&gt;  function VideoOnError(e) {  alert("Ошибка " + e.target.error.code); }  function InputFileChange() {  for (var i = 0; i &lt; 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; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

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

Скриншот:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Елена Вебер Ответ

11 марта 2026 в 05:43

Для того чтобы сделать так, чтобы источник видео менялся в соответствии с выбранным файлом, вам необходимо использовать JavaScript в сочетании с HTML5 video элементом и его свойством source.

Ниже приведен пример кода на JavaScript и HTML, который позволит вам реализовать данную функциональность:

 
 
 
    <title>Dynamic Video Source Change</title>
 
 
 
        Video 1
        Video 2
 
    <video id="videoPlayer" controls>
 
    </video>
 
 
        const videoSelect = document.getElementById('videoSelect');
        const videoPlayer = document.getElementById('videoPlayer');
 
        videoSelect.addEventListener('change', function() {
            const selectedVideo = videoSelect.value;
            videoPlayer.src = selectedVideo;
            videoPlayer.play();
        });

<title>Dynamic Video Source Change</title> Video 1 Video 2 <video id="videoPlayer" controls> </video> const videoSelect = document.getElementById('videoSelect'); const videoPlayer = document.getElementById('videoPlayer'); videoSelect.addEventListener('change', function() { const selectedVideo = videoSelect.value; videoPlayer.src = selectedVideo; videoPlayer.play(); });

В данном примере создается выпадающий список (select) с двумя опциями и видео элемент (video) с исходным источником видео. При изменении выбранной опции в списке, JavaScript обрабатывает событие и изменяет источник видео в соответствии с выбранной опцией. После этого видео начинает воспроизведение.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Figma Баг с переносом слов в Figma? 0 ответов

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

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно