Динамически использовать первый кадр в качестве плаката в видео HTML5?

Question

Мне интересно, есть ли какой-нибудь простой способ добиться этого эффекта, не требуя бэкэнд-кода для извлечения фрейма, сохраните его в виде jpg и поместите в базу данных где-нибудь.

Эффект, при котором первый кадр видео просто отображается как постер, когда загрузка видео будет очень полезной (он будет работать только в том случае, если браузер сможет воспроизвести видео явно, что может немного отличаться от того, как poster традиционно работает, но это не проблема.

Answer 1

Вы пробовали следующее?

просто добавить время в секундах # t = {секунд} к исходному URL:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

Я выбрал долю секунды ( 0.1 ), чтобы количество кадров было небольшим, потому что у меня есть подозрение, что если вы поставите 1 секунду, он будет "предварительно загружен" первая 1 секунда видео (т.е. 24 кадра или более ....). На всякий случай ...

Отлично работает на Chrome и Firefox на рабочем столе:)
Работает не на Android Mobile, хотя: (
Я еще не тестировал на iOS, iPhone, IE ??

Answer 2

Существует плагин Popcorn.js под названием Popcorn.capture , который позволит вам создавать постеры из любого кадра вашего HTML5-видео.

Существует ограничение, налагаемое браузером, который запрещает чтение пиксельных данных ресурсов, запрашиваемых по доменам (с помощью API Canvas для записи текущего значения кадра).Исходное видео должно быть размещено в том же домене, что и сценарий и html-страница, запрашивающая его, чтобы этот подход работал.

Код для создания плаката с использованием этого плагина довольно прост:

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});

Answer 3

Я недавно сделал это для недавнего проекта, который работает на настольных компьютерах и мобильных устройствах. Хитрость заключалась в том, чтобы заставить его работать на iPhone.

Настройка preload=metadata работает на настольных устройствах и устройствах Android, но не на iPhone.

Для iPhone мне нужно было установить autoplay, чтобы изображение плаката автоматически появлялось при начальной загрузке iPhone будет препятствовать автоматическому воспроизведению видео, но в результате появится изображение плаката.

Я должен был проверить iPhone, используя ответ Павана, найденный здесь. Обнаружить браузер iPhone . Затем используйте соответствующий видео тег с или без autoplay в зависимости от устройства.

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;

$videoTag = "";
if(isIphone()) {
    $videoTag = '<video controls autoplay preload="metadata">';
} else {
    $videoTag = '<video controls preload="metadata">';
}

Answer 4

Вы можете установить preload='auto' на элементе видео для автоматической загрузки первого кадра видео.

Answer 5

Для простоты вы можете просто добавить preload="metadata" к вашему видео тегу и второй из первого кадра #t=0.5 к вашему источнику видео :

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

Удачи!

Answer 6

Решение для кадров № 2, № 3 и т. Д. Нам нужно прикрепить одноразовый обработчик .one () для сброса фрейма по умолчанию.

<video width="300" height="150" id='my-video'>
   <source src="testvideo.mp4#t=2" type="video/mp4" />
</video>

$(function () {
     let videoJs = videojs('my-video');
     videoJs.one('play', function () {
          this.currentTime(0);
     });
});