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

Question

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

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

Answer 1

Существует плагин 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 2

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

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

Чтобы сделать это просто, вы можете просто добавить 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 4

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

настройка preload=metadata работает на настольных и Android-устройствах, но не 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 5

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

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);
     });
});

Answer 7

Я нашел отличный способ динамически добавлять постер к видео!

Чтобы показать нужный кадр из видео (в моем случае это кадр на 1,75 секунды) - добавляем preload="metadata"к элементу видео и #t=1.75до конца исходного URL.

Добавьте eventListener к элементу видео, который будет прослушивать playсобытие только один раз. Как только событие сгенерировано, сбросьте время видео.

      <video width="100%" controls="controls" preload="metadata" id="myVid">
    <source src="path/to/your/video#t=1.75" type="video/mp4">
</video>

<script>
    var el = document.getElementById('myVid');
    el.addEventListener('play', () => {
        el.currentTime = 0;
    }, { once: true });
</script>

Answer 8

Для других, кто хочет указать изображение как плакат, используйтеposter attribute:

      <video src="/path/to/video.mp4" poster="/path/to/poster.png"></video>