Как превратить file-ссылку в blob-ссылку, для работы с canvas?

Question

Hidden Fronter @AlTerminator

JavaScript

Как превратить file-ссылку в blob-ссылку, для работы с canvas?

<html>
<body>
<video src="test.mp4" controls onclick="VideoClick()"></video>
<script>
function VideoClick()
{
 //Как здесь получить источник видео в виде "blob:", а не "file:" ?
}
</script>
</body>
</html>

Вопрос задан 07 окт. 2024
137 просмотров

11 комментариев

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

Ivan Ustûžanin @IvanU7n

а зачем blob? в любом случае для этого файл нужно скачать в, например, Blob через fetch() + blob(), а потом его скормить в URL.createObjectURL()

Написано 07 окт. 2024
Aetae @Aetae Куратор тега JavaScript

Ты задачу то опиши, у меня есть сильное подозрение, что ты не понимаешь, что такое blob.

В любом случае file ссылку ты можешь получить только открывая html файл локально - не надо этого делать. Забудь о локальных файлах, они практически не поддерживаются и не работают, особенно со скриптами. Даже если делаешь что-то для себя - проще развернуть мини-сервер или электрон, чем возиться с произвольными недокументированными и постоянно меняющимися ограничениями.

Написано 07 окт. 2024
Hidden Fronter @AlTerminator Автор вопроса

Aetae, для себя делаю, плеер. Хочется создать превьюхи для загруженных видео, а canvas не работает с "file:", только с blob. Вот и решил конвертировать, чтобы обойтись без сервера. Интересно, а с "data:" canvas работает?

Написано 07 окт. 2024
Hidden Fronter @AlTerminator Автор вопроса

Ivan Ustûžanin, хочу сделать превью для видео, canvas работает только с blob, поэтому нужен blob. Может и "data:" работает, не знаю.

Написано 07 окт. 2024
Aetae @Aetae Куратор тега JavaScript
Hidden Fronter, удивлюсь если с blob заработает, наверняка по говносекурити отрубит.
Ну и чтоб получить тебе надо всё это test.mp4 в память браузера(оперативку) выкачать. Ты уверен что этого хочешь?

Код примерно такой:

onclick="VideoClick(this)" async function VideoClick(video) { const blob = await fetch(video.src).then(v => v.blob()); const url = URL.createObjectURL(blob); console.log(url) }
Написано 07 окт. 2024
Hidden Fronter @AlTerminator Автор вопроса

Aetae, согласен, лишь бы заработало. Кстати, с "data:" canvas работает?

Написано 07 окт. 2024
Adamos @Adamos

Превью видео делается одним запросом к ffmpeg на стороне сервера.
А задуманное - это классическое "вырезаем гланды автогеном через задницу", не имеет права на существование.

Написано 07 окт. 2024
Hidden Fronter @AlTerminator Автор вопроса

Adamos, хочется без всяких библиотек и прочего. На чистом JS.

Написано 07 окт. 2024
Adamos @Adamos

Hidden Fronter, а скачать весь рунет себе на страничку не хочется? На чистом жс?
Надо же хоть как-то соизмерять затраты и цели.

Написано 07 окт. 2024
Hidden Fronter @AlTerminator Автор вопроса

Aetae, не работает. А с "data:" canvas сработает?

Написано 07 окт. 2024
Aetae @Aetae Куратор тега JavaScript

Hidden Fronter, да, но какая разница? Оно или даёт выкачать и тогда и blob будет работать, или не даёт и тогда откуда ты data uri возьмёшь?

Написано 07 окт. 2024

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

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

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

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

JavaScript

Простой
Есть ли разница каким способом добавлять обработчик события в js, конкретно элементу или всему документу, смотря со стороны производительности?
- 1 подписчик
- 3 часа назад
- 26 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как прочитать файл через РНР, чтобы обработать его яваскриптом?
- 2 подписчика
- 10 часов назад
- 287 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как скрыть/показать элемент с определенным текстом?
- 2 подписчика
- 10 часов назад
- 372 просмотра
2

ответа
JavaScript

Средний
EventCalendar. Как установить событие в режим перетаскивания при загрузке страницы?
- 1 подписчик
- 07 мар.
- 70 просмотров
0

ответов
JavaScript

Простой
Как изменить html при помощи jquery?
- 1 подписчик
- 06 мар.
- 375 просмотров
4

ответа
JavaScript

+1 ещё

Средний
Сканирование QR в поле input. Как реализовать блокировку нажатия клавиш клавиатуры?
- 1 подписчик
- 06 мар.
- 130 просмотров
2

ответа
JavaScript

Простой
Надо ли делать отложенную загрузку для изображений формата webp/avif?
- 1 подписчик
- 05 мар.
- 100 просмотров
0

ответов
JavaScript

Простой
Поясните мне почему код работает JS?
- 1 подписчик
- 05 мар.
- 213 просмотров
1

ответ
JavaScript

Простой
Язык сайта в адресной строке, как доработать код?
- 1 подписчик
- 05 мар.
- 198 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Почему FullCalendar не правильно отображает диапазоны событий (в клиентской части)?
- 1 подписчик
- 04 мар.
- 96 просмотров
1

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

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

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

Rocket • Смоленск

от 120 000 ₽

Senior Frontend (JavaScript) разработчик

Vital Partners

от 350 000 до 420 000 ₽

а зачем blob? в любом случае для этого файл нужно скачать в, например, Blob через fetch() + blob(), а потом его скормить в URL.createObjectURL()
Ты задачу то опиши, у меня есть сильное подозрение, что ты не понимаешь, что такое blob.

В любом случае file ссылку ты можешь получить только открывая html файл локально - не надо этого делать. Забудь о локальных файлах, они практически не поддерживаются и не работают, особенно со скриптами. Даже если делаешь что-то для себя - проще развернуть мини-сервер или электрон, чем возиться с произвольными недокументированными и постоянно меняющимися ограничениями.
Aetae, для себя делаю, плеер. Хочется создать превьюхи для загруженных видео, а canvas не работает с "file:", только с blob. Вот и решил конвертировать, чтобы обойтись без сервера. Интересно, а с "data:" canvas работает?
Ivan Ustûžanin, хочу сделать превью для видео, canvas работает только с blob, поэтому нужен blob. Может и "data:" работает, не знаю.
Hidden Fronter, удивлюсь если с blob заработает, наверняка по говносекурити отрубит.
Ну и чтоб получить тебе надо всё это test.mp4 в память браузера(оперативку) выкачать. Ты уверен что этого хочешь?

Код примерно такой:

onclick="VideoClick(this)" async function VideoClick(video) { const blob = await fetch(video.src).then(v => v.blob()); const url = URL.createObjectURL(blob); console.log(url) }
Aetae, согласен, лишь бы заработало. Кстати, с "data:" canvas работает?
Превью видео делается одним запросом к ffmpeg на стороне сервера.
А задуманное - это классическое "вырезаем гланды автогеном через задницу", не имеет права на существование.
Adamos, хочется без всяких библиотек и прочего. На чистом JS.
Hidden Fronter, а скачать весь рунет себе на страничку не хочется? На чистом жс?
Надо же хоть как-то соизмерять затраты и цели.
Aetae, не работает. А с "data:" canvas сработает?
Hidden Fronter, да, но какая разница? Оно или даёт выкачать и тогда и blob будет работать, или не даёт и тогда откуда ты data uri возьмёшь?

Как превратить file-ссылку в blob-ссылку, для работы с canvas?

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

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

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