Как сделать так же как и на youtube?

Question

[lemonlimelike]

Наверное те кто часто посещают ютуб заметили, что недавно добавили такую плюшку интересную, что при наведение на картинки она начинает проигрывать некоторые моменты из самого видео. Как такое же сделать? Или кто-то знает как это называется?

Comments

[simka alien]

весь ютуб обрыл но превьюшки не проигрываются но на pornhub.com есть такая фишка

[Pavel Shvedov]

Например: делаешь гифку из кадров видео, ловишь событие mouseenter, меняешь src изображения на гифку, при mouseleave меняешь обратно

[simka alien]

Игорь: да так и есть , но я так понимаю если к примеру 1000 роликов и сисадмин будет сидеть нарезать их то скорее всего это проблема будет , а как делается что бы кадры из видоса нарезались ?

[Kovalsky]

И правда, где на ютубе превью? Не нашел.

[AlikDex]

simka alien: при помощи ffmpeg например можно нарезать кусочки по 3-5 секунд. Не обязательно админа садить.

[lemonlimelike]

simka alien: В смысле, когда наводишь на видео, оно проигрывает некоторые моменты из видео. Почему у меня есть а у вас нет? Или даже на порно хабе, как такое сделать?

[nirvimel]

simka alien:
На pornhub.com подгружаются *.webm - это красиво, реализуется на js очень просто, но ест трафик и предварительную нарезку этих превьюшек реализовать будет не просто.

На xhamster.com другой вариант - там подгружается длинный спрайт с кадрами из видео и на css-анимации эти кадры крутятся в цикле (меняется background-position) - это не столь красиво, но легче в плане трафика и на сервере покадровую нарезку реализовать проще, чем экстракцию видео превью.

На youtube.com тоже как-то сделано, но это уже не так интересно.

[sim3x]

nirvimel: а в чем проблема сделать 1 кадр из Х сек и склеить их потом в видео?

Тем более, что размер видео не 720р и даже не 480р

[nirvimel]

sim3x: Нет, там, где webm, там не отдельные кадры, а именно сплошные фрагменты видио.
А если делать покадрово, то лучше не трогать webm совсем, так как покадровая анимация делается на чистом css (даже без js), а webm не предусмотрен для этого и плохо сожмет смену сцены на каждом кадре.

[sim3x]

nirvimel:

1x mp4 vs 100x jpg кто будет больше по размеру?

вебм не формат, а контейнер - vp8 нормально сжимает

[nirvimel]

sim3x: Не сто jpg, а одна. Я уже писал как это устроено. Это один длинный спрайт, который "прокручивается" при помощи css-анимации как кинопленка.
Ничего плохого не скажу про vp8, но все видеокодеки "выдавливают" избыточность, связанную с похожестью соседних кадров. Когда каждый следующий кадр непохож на предыдущий, то выдавливать тут нечего, плотнее, чем jpg/png это не сжать.

Answer 1

[devalone]

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