Open4

Video(動画)や Youtube の埋め込み実装などについて

まさぴょんまさぴょん

Video Component を React で開発する🌟

VideoPlayer Component

VideoPlayer.tsx
import React from 'react';

const VideoPlayer = ({ src }) => {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={src} type="video/mp4" />
      お使いのブラウザはvideoタグをサポートしていません。
    </video>
  );
};
export default VideoPlayer;

VideoPlayer Component を呼び出す・使用する

App.tax
import React from 'react';
import VideoPlayer from './VideoPlayer'; // VideoPlayerコンポーネントのパスを適切に設定

const App = () => {
  return (
    <div>
      <VideoPlayer src="path/to/your/video.mp4" />
    </div>
  );
};

export default App;

関連リンク

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

https://qiita.com/ShortArrow/items/9c43a179a51c6ec32106