Как просмотреть видео с помощью Video-React

Question

Я хочу показать предварительный просмотр видео, когда пользователь выбирает видео в ответ. Какой-то друг предложил использовать video-react библиотека для предварительного просмотра видео. Не могли бы вы рассказать мне, как это возможно и как я могу реализовать предварительный просмотр видео в моем проекте. В настоящее время я использую ant-design для выбора видео

Ссылка на видео-реакцию : нажмите на видео-реакцию

Answer 1

Просто следуйте инструкциям.

import React from 'react';
import { Player } from 'video-react';

export default (props) => {
  return (
    <Player
      playsInline
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />
  );
};

Для миниатюр вы можете использовать react-video-thumbnail, Генерирует миниатюру для данного URL-адреса видео. https://www.npmjs.com/package/react-video-thumbnail

Answer 2

Я использую react-player, где опция "controls" - установите значение true или false для отображения собственных элементов управления плеером.

<ReactPlayer url={'url/to/video'} className={classes.styleView} playing controls/>