Показать миниатюру видео без загрузки видео
Можно ли показать миниатюру из видео без загрузки видео? Мне не нужно видео для воспроизведения, просто хочу показать миниатюру.
Я хочу показать миниатюру после загрузки видео с помощью загрузки файла. И миниатюра должна исходить из видео.
Все на локалхосте.
Спасибо
если сайт видеопотока не дает вам готовую миниатюру - вы не можете показать миниатюру без захвата видео .... вам нужно создать маленькие картинки самостоятельно ... и подключить их к правильному тегу IMG
только на локальном хосте - все, что я читал, было об использовании плаката, но для этого требуется загрузка видео. Я планирую отображать миниатюру после загрузки видео с помощью файла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
да.
Вы можете указать не загружать видео с preload = "none". Вы можете указать миниатюру с poster = "<url of image>". Дополнительные параметры документы <video>
<h1>Default</h1>
<video controls width = "200">
<source src = "https://www.w3schools.com/tags/movie.mp4" type = "video/mp4">
</video>
<h1>With poster + preload = "none"</h1>
<video controls width = "200" preload = "none" poster = "https://upload.wikimedia.org/wikipedia/commons/4/46/Bear_Alaska_%283%29.jpg">
<source src = "https://www.w3schools.com/tags/movie.mp4" type = "video/mp4">
</video>На самом деле у меня нет изображения миниатюры - мне нужно, чтобы миниатюра исходила из видео, которое я загружаю с помощью загрузки файла.
Тогда не используйте тег плаката. Плакат (то, что вы называете эскизом) будет автоматически загружен при использовании меньшего количества данных.
Проблема в том, что когда я устанавливаю для предварительной загрузки значение «нет», он ничего не загружает в виде постера (миниатюры) — imgur.com/a/wF8n6q5
Это решило мою проблему, но я загружаю видео в iframe со ссылкой на YouTube в качестве источника. Хорошее решение, если на вашу страницу добавлено много видео, потому что это значительно снижает время загрузки страницы. Спасибо @NinoFiliu!
Вы можете установить npm: video-metadata-thumbnails, а затем использовать его следующим образом:
import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';
const thumbnails = await getThumbnails(blob, {
interval: 1,
start: 0,
end: 0
});
console.info('Preview: ', thumbnails[0]);
Пример: https://www.ellow.cn/examples/video-metadata-thumbnails/index.html
что вы пробовали и искали? Где вы планируете это использовать? Откуда видео? Вам нужно более подробно описать свою проблему.