React’te bir video oynatıcı oluşturmak zorlu bir görev gibi görünebilir. Ancak doğru araç ve tekniklerle bunu nispeten kolaylıkla yapabilirsiniz.
React’te bir video oynatıcı oluşturmanın iki yolu vardır: yerleşik özellikleri kullanmak ve üçüncü taraf kitaplıkları kullanmak.
React’te Video Oynatıcı Oluşturma
Bir React video oynatıcısı oluşturmadan önce, temel düzeyde HTML, CSS ve JavaScript bilgisine sahip olduğunuzdan emin olun.
Aşağıdaki video oynatıcı işlevini eklemek için temel bir React uygulaması oluşturarak başlayın .
Yerleşik Özellikleri Kullanma (React Hooks)
React’te bir video oynatıcı oluşturmanın ilk seçeneği yerleşik özellikleri kullanmaktır.
Videoyu ve tüm kontrollerini gösterecek oynatıcı bileşenini oluşturarak başlayın. Bunu yapmak için “Player.js” adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
import React from ‘react’;
const Player = () => {
return (
<div>
<video width=”100%” height=”100%” controls>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″ type=”video/mp4″ />
</video>
</div>
)
}
export default Player;
Bu kod, React kitaplığını içe aktarır ve bir oynatıcı bileşeni oluşturur. Ayrıca, kontroller özniteliği “true” olarak ayarlanmış bir video öğesi ekler. Bu, temel video oynatıcıyı sayfaya ekleyecektir.
Ardından, oynat/duraklat düğmesini ekleyin. Bunu yapmak için, oynatıcı bileşenine birkaç satır kod eklemeniz gerekir. Player.js dosyasına aşağıdaki kodu ekleyin:
import React, { useState, useRef } from ‘react’;
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
return (
<div>
<video
ref={videoRef}
width=”100%”
height=”100%”
controls
>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″ type=”video/mp4″ />
</video>
<button onClick={togglePlay}>
{isPlaying ? “Pause” : “Play”}
</button>
</div>
)
}
export default Player;
Bu kod , videonun durumunu (oynatılıyor veya duraklatılmış olsun) ve video öğesine yapılan referansı takip etmek için useState ve useRef kancalarını kullanır. Ayrıca videoyu oynatacak ve duraklatacak bir togglePlay işlevi ekler. Düğme öğesi, togglePlay işlevini tetikleyecektir.
Son adım, ilerleme çubuğunu eklemektir. Bunu yapmak için Player.js dosyasına birkaç satır daha kod eklemeniz gerekecek. Aşağıdakileri ekleyin:
import React, { useState, useRef } from ‘react’;
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const duration = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progress = (currentTime / duration) * 100;
setProgress(progress);
};
return (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
width=”100%”
height=”100%”
controls
>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″ type=”video/mp4″ />
</video>
<div>
<button onClick={togglePlay}>
{isPlaying ? “Pause” : “Play”}
</button>
<progress value={progress} max=”100″ />
</div>
</div>
)
}
export default Player;
Bu kod, handleProgress işlevini ekler. Bu işlev, ilerleme çubuğunu güncelleyecektir. Ayrıca video öğesine, handleProgress işlevini tetikleyecek bir onTimeUpdate olay dinleyicisi ekler. Son olarak, sırasıyla ilerleme ve 100 olarak ayarlanan değer ve maksimum niteliklerle sayfaya bir ilerleme öğesi ekler.
yerleşik özellikleri kullanarak video oynatıcılı uygulamaya tepki verin
Üçüncü Taraf Kitaplıklarını Kullanma
React’te bir video oynatıcı oluşturmak için ikinci seçenek, üçüncü taraf kitaplıkları kullanmaktır. Kullanılabilir birçok kitaplık vardır, ancak en popüler olanlardan bazıları ReactPlayer ve React-media-player’dır.
ReactPlayer
ReactPlayer, yalnızca birkaç satır kodla bir video oynatıcı oluşturmanıza olanak tanıyan basit, hafif bir kitaplıktır. Kurmak için terminalinizde aşağıdaki komutu çalıştırın:
npm install react-player
Kurulduktan sonra, şu şekilde kullanabilirsiniz:
import React from ‘react’;
import ReactPlayer from ‘react-player’;
const Player = () => {
return (
<ReactPlayer
url=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″
width=”100%”
height=”100%”
controls
/>
)
}
export default Player;
Bu kod, reaksiyon oynatıcı kitaplığından ReactPlayer bileşenini içe aktarır ve onu sayfaya ekler. URL, genişlik, yükseklik ve kontrol niteliklerini ayarlar. Bu parametrelerin her birine tek tek göz atın:
url: Bu, oynatmak istediğiniz videonun URL’sidir.
genişlik: Bu, video oynatıcının genişliğidir.
yükseklik: Bu, video oynatıcının yüksekliğidir.
kontroller: Bu, video oynatıcının kontrollere sahip olup olmayacağını belirleyen bir boolean özelliğidir.
tepki oynatıcıyı kullanarak video oynatıcılı tepki uygulaması
tepki-video-js-oynatıcı
tepki-video-js-player, yalnızca birkaç satır kodla bir video oynatıcı oluşturmanıza olanak tanıyan başka bir basit, hafif kitaplıktır. Kurmak için terminalinizde aşağıdaki komutu çalıştırın:
npm install react-video-js-player
Kurulduktan sonra, şu şekilde kullanabilirsiniz:
import React from “react”;
import VideoPlayer from “react-video-js-player”;
const Player = () => {
return (
<VideoPlayer
width=”100%”
height=”100%”
src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″
controls
/>
)
}
export default Player;
Bu kod, VideoPlayer bileşenini tepki-video-js-player kitaplığından alır ve sayfaya ekler.
React-video-js-player kullanarak video oynatıcılı reaksiyon uygulaması
Ek Video Oynatıcı Özellikleri
Video oynatıcınıza aşağıdakiler gibi ekstra özellikler ekleyebilirsiniz:
Poster ekleme: Video öğesinin poster özelliğini görüntünün URL’sine ayarlayarak video oynatıcınıza bir poster görüntüsü ekleyebilirsiniz.
Döngü: Video öğesinin döngü özelliğini “doğru” olarak ayarlayarak videonuzu döngüye alabilirsiniz.
Muted: Video öğesinin muted özelliğini “true” olarak ayarlayarak videonuzun sesini kapatabilirsiniz.
Otomatik oynatma: Video öğesinin otomatik oynatma özelliğini “doğru” olarak ayarlayarak videonuzu otomatik olarak oynatabilirsiniz.
Video oynatıcıya kendi özel kontrollerinizi de ekleyebilirsiniz. Bunu yapmak için video öğesine olay dinleyicileri eklemeniz ve videoyu kontrol etmek için işlevler yazmanız gerekir.
Bir Video Oynatıcıyla Kullanıcı Etkileşimini Artırın
Doğru araç ve tekniklerle React’te kolayca bir video oynatıcı oluşturabilirsiniz. Kullanıcı etkileşimini artırmak için ek özellikler de ekleyebilirsiniz. Medya oynatıcılar, web sitenize veya uygulamanıza kullanıcı katılımını artırmanın harika bir yoludur.
Sitenize bir video oynatıcı ekledikten sonra, istenen etkiyi yaratıp yaratmadığını görmek için kullanıcı katılımını izlediğinizden emin olun. Bir video oynatıcı eklemenin dönüşüm oranlarını artırıp artırmadığını görmek için A/B testi de uygulayabilirsiniz.