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;
関連リンク
react-player ライブラリを使った実装🌟
React で Video Component 自前実装🌟
react-youtube で Youtube埋め込みを実装する