Как превратить 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 окт.
131 просмотр

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

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

Ivan Ustûžanin @IvanU7n

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

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

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

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

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

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

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

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

Написано 07 окт.
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 окт.
Hidden Fronter @AlTerminator Автор вопроса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 135 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 156 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 136 просмотров
3

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Обработать фото в стиле ASCII

22 нояб. 2024, в 08:04

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

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

а зачем 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?

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

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

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