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.
La başlamak temel bir React uygulaması oluşturma aşağıdaki video oynatıcı işlevini eklemek için.
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:
içe aktarmak Tepki itibaren 'tepki';sabit Oyuncu = () => {
geri dönmek (
<div>
<video genişliği="100%" yükseklik="100%" kontroller>
<kaynak kaynak="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tür="video/mp4" />
</video>
</div>
)
}
ihracatvarsayılan Oyuncu;
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:
içe aktarmak Tepki, { useState, useRef } itibaren 'tepki';sabit Oyuncu = () => {
sabit [isPlaying, setIsPlaying] = useState(YANLIŞ);
sabit videoRef = kullanRef(hükümsüz);
sabit togglePlay = () => {
eğer (Çalıyorsa) {
videoRef.akım.Duraklat();
} başka {
videoRef.akım.oynamak();
}
setIsPlaying(!isPlaying);
};
geri dönmek (
<div>
<video
ref={videoRef}
genişlik="100%"
yükseklik="100%"
kontroller
>
<kaynak kaynak="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tür="video/mp4" />
</video>
<düğme onClick={togglePlay}>
{oynuyor? "Duraklat": "Oynamak"}
</button>
</div>
)
}
ihracatvarsayılan Oyuncu;
Bu kod kullanır useState ve useRef kancaları videonun durumunu (oynatılıyor veya duraklatılmış) ve video öğesine yapılan referansı takip etmek için. 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:
içe aktarmak Tepki, { useState, useRef } itibaren 'tepki';sabit Oyuncu = () => {
sabit [isPlaying, setIsPlaying] = useState(YANLIŞ);
sabit [ilerleme, setProgress] = useState(0);
sabit videoRef = kullanRef(hükümsüz);
sabit togglePlay = () => {
eğer (Çalıyorsa) {
videoRef.akım.Duraklat();
} başka {
videoRef.akım.oynamak();
}
setIsPlaying(!isPlaying);
};
sabit handleProgress = () => {
sabit süre = videoRef.current.duration;
sabit currentTime = videoRef.current.currentTime;
sabit ilerleme = (currentTime / süre) * 100;
setProgress (ilerleme);
};
geri dönmek (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
genişlik="100%"
yükseklik="100%"
kontroller
>
<kaynak kaynak="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tür="video/mp4" />
</video>
<div>
<düğme onClick={togglePlay}>
{oynuyor? "Duraklat": "Oynamak"}
</button>
<ilerleme değeri={ilerleme} maks="100" />
</div>
</div>
)
}
ihracatvarsayılan Oyuncu;
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.
Üçü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 düzenlemek tepki oyuncusuKurulduktan sonra, şu şekilde kullanabilirsiniz:
içe aktarmak Tepki itibaren 'tepki';
içe aktarmak ReactPlayer itibaren "tepki oynatıcı";sabit Oyuncu = () => {
geri dönmek (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
genişlik="100%"
yükseklik="100%"
kontroller
/>
)
}
ihracatvarsayılan Oyuncu;
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 boole özniteliğidir.
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 düzenlemek tepki-video-js-oynatıcıKurulduktan sonra, şu şekilde kullanabilirsiniz:
içe aktarmak Tepki itibaren "tepki";
içe aktarmak Video oynatıcı itibaren "react-video-js-player";sabit Oyuncu = () => {
geri dönmek (
<Video oynatıcı
genişlik="100%"
yükseklik="100%"
kaynak="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontroller
/>
)
}
ihracatvarsayılan Oyuncu;
Bu kod, VideoPlayer bileşenini tepki-video-js-player kitaplığından alır ve sayfaya ekler.
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 "true" olarak ayarlayarak videonuzu döngüye alabilirsiniz.
- Sessiz: 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 etkiye sahip olup olmadığını görmek için kullanıcı etkileşimini 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.
