Миниатюра Реактивного игрока

Question

Я использую реагирующий плеер для воспроизведения видео. Не уверен, что есть какие-то лучшие варианты, но это, кажется, делает работу. Единственная проблема, которая у меня есть, заключается в том, что мне нужно получить эскизы для видео. Есть идеи, как мне это обойти?

Если вы знаете о каком-то лучшем варианте воспроизведения видео в веб-приложении React с поддерживаемыми миниатюрами, это было бы также неплохо.

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 playing
 controls
/>

Спасибо

Редактировать: в конечном итоге я использовал само видео в качестве эскиза и блокировал все события мыши над ним. Затем используйте родительский div в качестве кнопки. В случае YouTube я заменяю видео миниатюрой, предоставленной YouTube ( https://img.youtube.com/), из-за большой кнопки воспроизведения над видео. У большинства других игроков этого нет.

Answer 1

Использовать light prop для предоставления игроку URL-адреса изображения.

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 light="http://placekitten.com/200/300"
 playing
 controls
/>

Answer 2

Если у вас есть конкретное изображение, которое вы хотите превратить в миниатюру, вы должны установить для URL изображения значение light:

 <ReactPlayer                                              
       url='https://vimeo.com/243556536'
       light = 'https://sampleimage.com'
       playing
       controls/>

Если вы хотите отобразить миниатюру видео, вам просто нужно установить для света значение true:

<ReactPlayer                                              
      url='https://vimeo.com/243556536'
      light = {true}
      playing
      controls/>

Ознакомьтесь с документацией response-player по этой ссылке: https://www.npmjs.com/package/react-player

Answer 3

Если вы пытаетесь добавить изображение приставателя, то у них есть что-то встроенное.

          <Player
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />

вот где я это нашел . Я искал что-то еще, наткнулся на это, а затем на ваш пост, поэтому решил поделиться им.

Answer 4

Вы должны захватить первый кадр видео как изображение, а затем сохранить его и использовать. Но это используется, когда вы работаете с обработкой изображений. Я рекомендую следующие варианты, пожалуйста, проверьте здесь - https://www.npmjs.com/package/react-player противном случае перейдите по этой https://video-react.js.org/