Как превратить 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>

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

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

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

Ivan Ustûžanin @IvanU7n

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

Написано более года назад
Aetae @Aetae Куратор тега JavaScript

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

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

Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

Написано более года назад
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) }
Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

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

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

Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

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

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

Написано более года назад
Hidden Fronter @AlTerminator Автор вопроса

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

Написано более года назад
Aetae @Aetae Куратор тега JavaScript

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

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

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

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

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

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

JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 1 подписчик
- 28 окт.
- 81 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 160 просмотров
2

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 218 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 130 просмотров
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 189 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как решить задачку из контеста?
- 1 подписчик
- 13 окт.
- 254 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Есть ли js-библиотека для офлайн-распознавания русской речи?
- 1 подписчик
- 12 окт.
- 181 просмотр
2

ответа
JavaScript

Простой
Почему не работает в консоли setTimeout?
- 1 подписчик
- 11 окт.
- 341 просмотр
1

ответ
JavaScript

Простой
Как прочитать ответ сервера после отправки формы?
- 2 подписчика
- 27 сент.
- 302 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 356 просмотров
1

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

Web-разработчик/WordPress программист (Full-stack)

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

от 130 000 до 150 000 ₽

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

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

ITK academy • Нижний Новгород

от 50 000 до 90 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?

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

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

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