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

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

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

34
html5 html5-video javascript poster

4 ответов

есть попкорн.js плагин попкорн.захват что позволит вам создавать плакаты из любого кадра вашего видео HTML5.

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

});
19

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

задание preload=metadata работает на настольных и android устройств, но не iPhone.

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

мне пришлось сделать проверку для 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">';
}
11

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

просто добавить время в секундах #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 ??

9

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

6