React, web uygulamaları oluşturmak için kullanılan bir JavaScript kütüphanesidir. Video oynatıcı bileşenleri, React’te kolayca oluşturulabilir.
İşte basit bir video oynatıcı bileşeni örneği:
import React, { useState, useRef } from “react”;
function VideoPlayer(props) {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const handlePlay = () => {
setIsPlaying(true);
videoRef.current.play();
};
const handlePause = () => {
setIsPlaying(false);
videoRef.current.pause();
};
return (
<div>
<video ref={videoRef} src={props.src} />
{isPlaying ? (
<button onClick={handlePause}>Pause</button>
) : (
<button onClick={handlePlay}>Play</button>
)}
</div>
);
}
export default VideoPlayer;
Bu örnek bileşen, bir src özelliği aracılığıyla bir video dosyasının yolu alır ve videoyu oynatmak veya duraklatmak için bir buton sağlar. useRef hook’u, video elemanına referans verir ve useState hook’u, video oynatma durumunu tutar. handlePlay ve handlePause işlevleri, video oynatma durumunu günceller ve video elemanını oynatır veya duraklatır. return ifadesi, video elemanına ve oynatma durumuna göre uygun butonu sağlar.
Bu bileşeni kullanmak için, örneğin:
javascript
import VideoPlayer from “./VideoPlayer”;
function App() {
return (
<div>
<VideoPlayer src="/path/to/video.mp4" />
</div>
);
}
export default App;
Bu, src özelliği “path/to/video.mp4” olan bir VideoPlayer bileşeni oluşturur.