Мне интересно, есть ли какой-либо простой способ добиться этого эффекта, без необходимости использования кода для извлечения фрейма, сохраните его как jpg и базу данных где-нибудь.
Эффект, при котором первый кадр видео просто отображается как плакат, когда видеопотоки будут настолько полезными (он будет работать только в том случае, если браузер может воспроизводить видео, очевидно, что может немного отличаться от того, как poster традиционно работает, но это не вызывает беспокойства.
Существует плагин 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();
});
Недавно я сделал это для недавнего проекта, который работает на настольных и мобильных устройствах. Трюк заключался в том, чтобы заставить его работать на 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">';
}
Вы можете установить preload='auto' на элемент видео, чтобы автоматически загрузить первый кадр видео.