Блог

Я пытаюсь отобразить видео в REACT JS в модальном полноэкранном режиме. У меня есть видео в качестве локального файла в проекте. Я хочу, чтобы видео было в виде миниатюры с кнопкой воспроизведения. Как только кто-то нажмет «Воспроизвести», видео будет воспроизводиться в виде модального всплывающего окна во весь экран.

Я попытался использовать react-modal-video компонент, но не могу понять, как заставить его работать с локальным файлом, и, похоже, он использует кнопку вместо миниатюры для видео.

Это мой код, в котором я передаю Vid видео в качестве опоры для компонента ( я могу легко визуализировать его с помощью ReactPlayer или тега html-видео), но я пытаюсь сделать это с помощью модального всплывающего окна, которое я обсуждал выше.

     const [isOpen, setOpen] = useState(false)
    return (
        <div className="player-wrapper">
            <ModalVideo custom className="react-player" autoplay isOpen={isOpen} url={Vid} onClose={() => setOpen(false)} />
        </div>
)}