Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
0 / 0 / 0
Регистрация: 08.04.2018
Сообщений: 3

Открыть видео из input file

08.04.2018, 15:55. Показов 2484. Ответов 1
Метки нет (Все метки)

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

HTML5
1
2
3
<video src="" id="video" controls></video>
<br>
<input type="file" id="file">
Как можно открыть локальный файл input на стороне клиета и возпроизвести в плеере?
Я знаю что нельзя получить абсолютный путь к клиентскому файлу. Что нужно вставить
в атрибут src чтобы воспроизвести файл input?


Я могу реализовать подобное с помощью php.

HTML5
1
2
3
4
<video id="video" src="<?php echo $video ?>" controls>
     <form action="index.php" method="POST" enctype="multipart/form-data">
            <input type="file" name="video"> 
     </form>
PHP
1
2
3
4
5
$directory = 'uploads/';
$video = $directory.('video');
if(isset($_FILES['video'])) {
    copy($_FILES['video']['tmp_name'], $video);
}
Но при таком коде приходиться копировать input файл и помещять в директорию $directory,
чтобы потом можно было его найти.
Как можно обойтись без копирования?
Просто выбрать локальный файл и воспроизвести на сайте.

Нашел похожую реализацию на сайте http://www.hamatata.com/play
Просто выбираешь фильм и воспроизводишь в плеере, без загрузки на сервер.
Подскажите как можно реализовать такое.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
08.04.2018, 15:55
Ответы с готовыми решениями:

Попытка открыть диалог выбор файла input type="file" через jq
&lt;form method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; &lt;input type=&quot;file&quot; id=&quot;file&quot; name=&quot;file&quot;&gt; &lt;input...

Получить названия файлов из input file в input text
Как переместить названия файла из input type file в input type text с помощью javascript?

Открыть видео из input file
Всем доброго дня. Уже несколько дней бьюсь с такой задачей. Есть такой код. &lt;video src=&quot;&quot; id=&quot;video&quot;...

1
Модератор
Эксперт JS
 Аватар для Eva Rosalene
5241 / 2115 / 416
Регистрация: 06.01.2013
Сообщений: 4,846
09.04.2018, 02:25
Лучший ответ Сообщение было отмечено den2412 как решение

Решение

HTML5
1
2
<input id="file" type="file" /><br />
<video id="result" autoplay controls />
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const pEventRace = (node, descriptors) => new Promise((resolve, reject) => {
   const callbacks = descriptors.map(descriptor => ({
     event: descriptor.event, 
     callback: event => {
       for (let callback of callbacks) {
         node.removeEventListener(callback.event, callback.callback, true)
       }
       
       descriptor.resolves ? resolve(event) : reject(event);
     }
   }));
  
  for (let callback of callbacks) {
    node.addEventListener(callback.event, callback.callback, true);
  }
});
 
document.querySelector("#file").addEventListener("change", async event => {
   const resolves = true;
  
   if (event.target.files.length === 0) return;
   const oUrl = URL.createObjectURL(event.target.files[0]);
   let video = document.querySelector("#result");
 
   let pVideoLoaded = pEventRace(video, [
     { event: "canplaythrough", resolves },
     { event: "error" }
   ]);
   video.src = oUrl;
 
   console.log(`src set`);
  
   try {
     await pVideoLoaded;
     console.log(`video loaded`);
     URL.revokeObjectURL(oUrl);
   } catch (error) {
     console.log(`video errored with ${error.message}`);
     URL.revokeObjectURL(oUrl);
   }
});
Добавлено через 14 секунд
https://codepen.io/eva-rosalene/pen/yKGJKE
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
09.04.2018, 02:25
Помогаю со студенческими работами здесь

Открыть локальное видео с input file
Всем доброго дня. Уже несколько дней бьюсь с такой задачей. Есть такой код. &lt;video src=&quot;&quot; id=&quot;video&quot;...

как приукрасить <input type="file"input type="file">
я задал свойства для данного елемента: img{ border: red; background-color: #00B330; border-radius: 4px; } но, как...

input file
Добрый день. у меня на сайте реализована многоязычность. подскажите как мне применить к тегу input язык? т.е. у меня на форме есть...

No input file specified
Всем здравствуйте :) При обращении к сайту иногда возникает эта ошибка. отчего может возникать она? в большинстве случаев помогает...

input file
Ребята! помогите пожалуйста! хочу научиться работать с reedFile или scaner. есть массив , записанный в txt файле, нужно извлечь из...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II
kumehtar 04.04.2026
Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru