Membuat pemutar video di React mungkin tampak seperti tugas yang menantang. Tetapi dengan alat dan teknik yang tepat, Anda dapat melakukannya dengan relatif mudah.
Ada dua cara untuk membuat pemutar video di React: menggunakan fitur bawaan dan menggunakan pustaka pihak ketiga.
Membuat Pemutar Video di React
Sebelum membuat pemutar video React, pastikan Anda memiliki pemahaman dasar tentang HTML, CSS, dan JavaScript.
Mulai oleh membuat aplikasi React dasar untuk menambahkan fungsionalitas pemutar video berikut.
Menggunakan Fitur Bawaan (React Hooks)
Opsi pertama untuk membuat pemutar video di React adalah menggunakan fitur bawaan.
Mulailah dengan membuat komponen pemutar yang akan menampilkan video dan semua kontrolnya. Untuk melakukan ini, buat file bernama "Player.js" dan tambahkan kode berikut:
impor Reaksi dari 'reaksi';const Pemain = () => {
kembali (
<div>
<lebar video="100%" tinggi ="100%" kontrol>
<sumber src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" jenis="video/mp4" />
</video>
</div>
)
}eksporbawaan Pemain;
Kode ini mengimpor pustaka React dan membuat komponen pemutar. Itu juga menambahkan elemen video dengan atribut kontrol disetel ke "benar". Ini akan menambahkan pemutar video dasar ke halaman.
Selanjutnya, tambahkan tombol play/pause. Untuk melakukannya, Anda perlu menambahkan beberapa baris kode ke komponen pemutar. Tambahkan kode berikut ke file Player.js:
impor Bereaksi, { useState, useRef } dari 'reaksi';const Pemain = () => {
const [isPlaying, setIsPlaying] = useState(PALSU);
const videoRef = gunakanRef(batal);
const togglePlay = () => {
if (memutar) {
videoRef.saat ini.berhenti sebentar();
} kalau tidak {
videoRef.saat ini.bermain();
}
setIsPlaying(!isPlaying);
};
kembali (
<div>
<video
ref={videoRef}
lebar="100%"
tinggi ="100%"
kontrol
>
<sumber src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" jenis="video/mp4" />
</video>
<tombol onClick={togglePlay}>
{sedang bermain? "Berhenti sebentar": "Bermain"}
</button>
</div>
)
}
eksporbawaan Pemain;
Kode ini menggunakan kait useState dan useRef untuk melacak status video (apakah diputar atau dijeda) dan referensi ke elemen video. Itu juga menambahkan fungsi togglePlay yang akan memutar dan menjeda video. Elemen tombol akan memicu fungsi togglePlay.
Langkah terakhir adalah menambahkan bilah kemajuan. Untuk melakukan ini, Anda perlu menambahkan beberapa baris kode lagi ke file Player.js. Tambahkan yang berikut ini:
impor Bereaksi, { useState, useRef } dari 'reaksi';const Pemain = () => {
const [isPlaying, setIsPlaying] = useState(PALSU);
const [progres, setProgres] = useState(0);
const videoRef = gunakanRef(batal);
const togglePlay = () => {
if (memutar) {
videoRef.saat ini.berhenti sebentar();
} kalau tidak {
videoRef.saat ini.bermain();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const durasi = videoRef.current.durasi;
const currentTime = videoRef.current.currentTime;
const kemajuan = (waktu saat ini / durasi) * 100;
setProgress (kemajuan);
};
kembali (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
lebar="100%"
tinggi ="100%"
kontrol
>
<sumber src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" jenis="video/mp4" />
</video>
<div>
<tombol onClick={togglePlay}>
{sedang bermain? "Berhenti sebentar": "Bermain"}
</button>
<nilai progres={progres} maks="100" />
</div>
</div>
)
}
eksporbawaan Pemain;
Kode ini menambahkan fungsi handleProgress. Fungsi ini akan memperbarui bilah kemajuan. Itu juga menambahkan event listener onTimeUpdate ke elemen video yang akan memicu fungsi handleProgress. Terakhir, ia menambahkan elemen progres ke halaman dengan atribut nilai dan maks masing-masing ditetapkan ke progres dan 100.
Menggunakan Perpustakaan Pihak Ketiga
Pilihan kedua untuk membuat pemutar video di React adalah menggunakan pustaka pihak ketiga. Ada banyak pustaka yang tersedia, tetapi beberapa yang paling populer adalah ReactPlayer dan React-media-player.
ReactPlayer
ReactPlayer adalah pustaka sederhana dan ringan yang memungkinkan Anda membuat pemutar video hanya dengan beberapa baris kode. Untuk menginstalnya, jalankan perintah berikut di terminal Anda:
npm Install react-playerSetelah diinstal, Anda dapat menggunakannya seperti ini:
impor Reaksi dari 'reaksi';
impor ReactPlayer dari 'pemain reaksi';const Pemain = () => {
kembali (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
lebar="100%"
tinggi ="100%"
kontrol
/>
)
}
eksporbawaan Pemain;
Kode ini mengimpor komponen ReactPlayer dari perpustakaan react-player dan menambahkannya ke halaman. Ini mengatur atribut url, lebar, tinggi, dan kontrol. Lihatlah masing-masing parameter ini satu per satu:
- url: Ini adalah URL video yang ingin Anda putar.
- lebar: Ini adalah lebar pemutar video.
- tinggi: Ini adalah ketinggian pemutar video.
- kontrol: Ini adalah atribut boolean yang menentukan apakah pemutar video akan memiliki kontrol atau tidak.
react-video-js-player
react-video-js-player adalah pustaka sederhana dan ringan lainnya yang memungkinkan Anda membuat pemutar video hanya dengan beberapa baris kode. Untuk menginstalnya, jalankan perintah berikut di terminal Anda:
npm Install react-video-js-playerSetelah diinstal, Anda dapat menggunakannya seperti ini:
impor Reaksi dari "reaksi";
impor Pemutar video dari "reaksi-video-js-player";const Pemain = () => {
kembali (
<Pemutar video
lebar="100%"
tinggi ="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontrol
/>
)
}
eksporbawaan Pemain;
Kode ini mengimpor komponen VideoPlayer dari pustaka react-video-js-player dan menambahkannya ke halaman.
Fitur Pemutar Video Tambahan
Anda dapat menambahkan fitur tambahan ke pemutar video Anda, seperti:
- Menambahkan poster: Anda dapat menambahkan gambar poster ke pemutar video dengan menyetel atribut poster elemen video ke URL gambar.
- Pengulangan: Anda dapat mengulang video Anda dengan menyetel atribut loop dari elemen video ke "true".
- Meredam: Anda dapat membisukan video Anda dengan menyetel atribut muted dari elemen video ke "true".
- Putar otomatis: Anda dapat memutar video secara otomatis dengan menyetel atribut putar otomatis elemen video ke "benar".
Anda juga dapat menambahkan kontrol khusus Anda sendiri ke pemutar video. Untuk melakukannya, Anda harus menambahkan event listener ke elemen video dan menulis fungsi untuk mengontrol video.
Tingkatkan Keterlibatan Pengguna Dengan Pemutar Video
Dengan alat dan teknik yang tepat, Anda dapat dengan mudah membuat pemutar video di React. Anda juga dapat menambahkan fitur tambahan untuk meningkatkan keterlibatan pengguna. Pemutar media adalah cara terbaik untuk meningkatkan keterlibatan pengguna di situs web atau aplikasi Anda.
Setelah menambahkan pemutar video ke situs Anda, pastikan untuk melacak keterlibatan pengguna untuk melihat apakah pemutar video memberikan efek yang diinginkan. Anda juga dapat menerapkan pengujian A/B untuk melihat apakah penambahan pemutar video meningkatkan rasio konversi.
