Reactを使用したビデオモーダルの実装方法

まず、Reactプロジェクトをセットアップしましょう。以下のコマンドを使用して、新しいReactアプリケーションを作成します。

npx create-react-app video-modal-app
cd video-modal-app

次に、必要なライブラリをインストールします。Reactモーダルやビデオ再生に使用するライブラリを追加する必要があります。以下のコマンドを使用してインストールします。

npm install react-modal react-player

インストールが完了したら、ビデオモーダルコンポーネントを作成します。以下のコードは、基本的なビデオモーダルを実装する例です。

import React, { useState } from 'react';
import Modal from 'react-modal';
import ReactPlayer from 'react-player';
Modal.setAppElement('#root');
const VideoModal = ({ videoUrl }) => {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const openModal = () => {
    setModalIsOpen(true);
  };
  const closeModal = () => {
    setModalIsOpen(false);
  };
  return (
    <div>
      <button onClick={openModal}>ビデオを再生</button>
      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <ReactPlayer url={videoUrl} controls={true} />
      </Modal>
    </div>
  );
};
export default VideoModal;

この例では、react-modalとreact-playerを使用してビデオモーダルを作成しています。VideoModalコンポーネントは、videoUrlプロップを受け取り、ボタンをクリックするとモーダルが表示され、ビデオが再生されます。

このコンポーネントを他のコンポーネントで使用するには、以下のようにします。

import React from 'react';
import VideoModal from './VideoModal';
const App = () => {
  const videoUrl = 'https://example.com/video.mp4';
  return (
    <div>
      <h1>ビデオモーダルのデモ</h1>
      <VideoModal videoUrl={videoUrl} />
    </div>
  );
};
export default App;

上記の例では、VideoModalコンポーネントを使用してビデオモーダルを表示しています。videoUrlプロップには、再生したいビデオのURLを指定します。