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

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

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

Ответы

Ответ 1

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

Существует ограничение, которое накладывает браузер, который запрещает считывать данные о пикселях ресурсов, запрашиваемых во всех доменах (используя API холста для записи текущего значения кадра). Исходное видео должно размещаться в том же домене, что и страница script и 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();

});

Ответ 2

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

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

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

Мне нужно было сделать чек на iPhone, используя ответ Pavan, найденный здесь. Обнаружение браузера 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">';
}

Ответ 3

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