Tworzenie odtwarzacza wideo w React może wydawać się trudnym zadaniem. Ale dzięki odpowiednim narzędziom i technikom możesz to zrobić ze względną łatwością.
Istnieją dwa sposoby tworzenia odtwarzacza wideo w React: przy użyciu wbudowanych funkcji i przy użyciu bibliotek innych firm.
Tworzenie odtwarzacza wideo w React
Przed utworzeniem odtwarzacza wideo React upewnij się, że znasz podstawy HTML, CSS i JavaScript.
Zacząć od tworzenie podstawowej aplikacji React dodać następującą funkcję odtwarzacza wideo.
Korzystanie z wbudowanych funkcji (react hooks)
Pierwszą opcją tworzenia odtwarzacza wideo w React jest użycie wbudowanych funkcji.
Zacznij od utworzenia komponentu odtwarzacza, który będzie wyświetlał wideo i wszystkie jego elementy sterujące. W tym celu utwórz plik o nazwie „Player.js” i dodaj następujący kod:
import Reagować z 'reagować';
konst Gracz = () => {
powrót (
<dz>
<szerokość wideo ="100%" wysokość="100%" sterownica>
<źródło źródłowe="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="wideo/mp4" />
</video>
</div>
)
}
eksportdomyślny Gracz;
Ten kod importuje bibliotekę React i tworzy komponent odtwarzacza. Dodaje również element wideo z atrybutem kontrolek ustawionym na „true”. Spowoduje to dodanie podstawowego odtwarzacza wideo do strony.
Następnie dodaj przycisk odtwarzania/pauzy. Aby to zrobić, musisz dodać kilka linii kodu do komponentu odtwarzacza. Dodaj następujący kod do pliku Player.js:
import Zareaguj, { useState, useRef } z 'reagować';konst Gracz = () => {
konst [odtwarzanie, ustawianie odtwarzania] = useState(FAŁSZ);
konst wideoRef = użyjRef(zero);
konst togglePlay = () => {
if (gra) {
wideoRef.aktualny.pauza();
} w przeciwnym razie {
wideoRef.aktualny.grać();
}
setIsPlaying(!isPlaying);
};
powrót (
<dz>
<wideo
ref={videoRef}
szerokość="100%"
wysokość="100%"
sterownica
>
<źródło źródłowe="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="wideo/mp4" />
</video>
<button onClick={togglePlay}>
{gra? "Pauza": "Grać"}
</button>
</div>
)
}
eksportdomyślny Gracz;
Ten kod używa haki useState i useRef aby śledzić stan filmu (odtwarzanie lub wstrzymanie) oraz odniesienie do elementu wideo. Dodaje również funkcję togglePlay, która odtwarza i wstrzymuje wideo. Element przycisku uruchomi funkcję togglePlay.
Ostatnim krokiem jest dodanie paska postępu. Aby to zrobić, musisz dodać kilka dodatkowych linii kodu do pliku Player.js. Dodaj następujące informacje:
import Zareaguj, { useState, useRef } z 'reagować';konst Gracz = () => {
konst [odtwarzanie, ustawianie odtwarzania] = useState(FAŁSZ);
konst [postęp, ustawPostęp] = użyjStan(0);
konst wideoRef = użyjRef(zero);
konst togglePlay = () => {
if (gra) {
wideoRef.aktualny.pauza();
} w przeciwnym razie {
wideoRef.aktualny.grać();
}
setIsPlaying(!isPlaying);
};
konst uchwytProgress = () => {
konst czas trwania = videoRef.bieżący.czas trwania;
konst aktualnyCzas = wideoRef.bieżący.Czas aktualny;
konst postęp = (bieżący czas / czas trwania) * 100;
setProgress (postęp);
};
powrót (
<dz>
<wideo
onTimeUpdate={handleProgress}
ref={videoRef}
szerokość="100%"
wysokość="100%"
sterownica
>
<źródło źródłowe="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="wideo/mp4" />
</video>
<dz>
<button onClick={togglePlay}>
{gra? "Pauza": "Grać"}
</button>
<wartość postępu={postęp} max="100" />
</div>
</div>
)
}
eksportdomyślny Gracz;
Ten kod dodaje funkcję handleProgress. Ta funkcja zaktualizuje pasek postępu. Dodaje również detektor zdarzeń onTimeUpdate do elementu wideo, który uruchomi funkcję handleProgress. Na koniec dodaje element progress do strony z atrybutami value i max ustawionymi odpowiednio na progress i 100.
Korzystanie z bibliotek stron trzecich
Drugą opcją tworzenia odtwarzacza wideo w React jest użycie zewnętrznych bibliotek. Dostępnych jest wiele bibliotek, ale niektóre z najbardziej popularnych to ReactPlayer i React-media-player.
ReactPlayer
ReactPlayer to prosta, lekka biblioteka, która pozwala stworzyć odtwarzacz wideo za pomocą zaledwie kilku linii kodu. Aby go zainstalować, uruchom następujące polecenie w swoim terminalu:
np zainstalować Reaguj-graczPo zainstalowaniu możesz go używać w następujący sposób:
import Reagować z 'reagować';
import ReactPlayer z „reaguj-gracz”;konst Gracz = () => {
powrót (
<ReactPlayer
adres URL="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
szerokość="100%"
wysokość="100%"
sterownica
/>
)
}
eksportdomyślny Gracz;
Ten kod importuje komponent ReactPlayer z biblioteki React-Player i dodaje go do strony. Ustawia adres URL, szerokość, wysokość i kontroluje atrybuty. Przyjrzyj się każdemu z tych parametrów jeden po drugim:
- Adres URL: To jest adres URL filmu, który chcesz odtworzyć.
- szerokość: To jest szerokość odtwarzacza wideo.
- wysokość: To jest wysokość odtwarzacza wideo.
- sterownica: Jest to atrybut logiczny, który określa, czy odtwarzacz wideo będzie miał elementy sterujące, czy nie.
Reaguj-video-js-player
react-video-js-player to kolejna prosta, lekka biblioteka, która pozwala stworzyć odtwarzacz wideo za pomocą zaledwie kilku linijek kodu. Aby go zainstalować, uruchom następujące polecenie w swoim terminalu:
np zainstalować Reaguj-video-js-playerPo zainstalowaniu możesz go używać w następujący sposób:
import Reagować z "reagować";
import Odtwarzacz wideo z "react-video-js-player";konst Gracz = () => {
powrót (
<Odtwarzacz wideo
szerokość="100%"
wysokość="100%"
źródło="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
sterownica
/>
)
}
eksportdomyślny Gracz;
Ten kod importuje komponent VideoPlayer z biblioteki react-video-js-player i dodaje go do strony.
Dodatkowe funkcje odtwarzacza wideo
Możesz dodać dodatkowe funkcje do swojego odtwarzacza wideo, takie jak:
- Dodanie plakatu: Możesz dodać obraz plakatu do swojego odtwarzacza wideo, ustawiając atrybut plakatu elementu wideo na adres URL obrazu.
- Zapętlanie: Możesz zapętlić wideo, ustawiając atrybut pętli elementu wideo na „true”.
- Wyciszony: Możesz wyciszyć swój film, ustawiając wyciszony atrybut elementu wideo na „true”.
- Automatyczne odtwarzanie: Możesz automatycznie odtwarzać wideo, ustawiając atrybut autoplay elementu wideo na „true”.
Możesz także dodać własne niestandardowe elementy sterujące do odtwarzacza wideo. Aby to zrobić, musisz dodać detektory zdarzeń do elementu wideo i napisać funkcje do sterowania wideo.
Zwiększ zaangażowanie użytkowników dzięki odtwarzaczowi wideo
Dzięki odpowiednim narzędziom i technikom możesz łatwo stworzyć odtwarzacz wideo w React. Możesz także dodać dodatkowe funkcje, aby zwiększyć zaangażowanie użytkowników. Odtwarzacze multimedialne to świetny sposób na zwiększenie zaangażowania użytkowników w Twojej witrynie lub aplikacji.
Po dodaniu odtwarzacza wideo do witryny pamiętaj o śledzeniu zaangażowania użytkowników, aby sprawdzić, czy przynosi to oczekiwany efekt. Możesz także wdrożyć testy A/B, aby sprawdzić, czy dodanie odtwarzacza wideo zwiększa współczynniki konwersji.
