Прављење видео плејера у Реацт-у може изгледати као изазован задатак. Али са правим алатима и техникама, то можете учинити са релативном лакоћом.
Постоје два начина да направите видео плејер у Реацт-у: коришћењем уграђених функција и коришћењем библиотека трећих страна.
Креирање видео плејера у Реацт-у
Пре него што направите Реацт видео плејер, уверите се да имате основно разумевање ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а.
Старт би креирање основне Реацт апликације да додате следећу функционалност видео плејера.
Коришћење уграђених функција (Реацт Хоокс)
Прва опција за креирање видео плејера у Реацт-у је коришћење уграђених функција.
Започните креирањем компоненте плејера која ће приказати видео и све његове контроле. Да бисте то урадили, креирајте датотеку под називом „Плаиер.јс“ и додајте следећи код:
увоз Реаговати из 'реаговати';конст Играч = () => {
повратак
(
<див>
<ширина видеа="100%" висина="100%" контроле>
<извор срц="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" типе="видео/мп4" />
</video>
</div>
)
}извозУобичајено Плаиер;
Овај код увози Реацт библиотеку и креира компоненту играча. Такође додаје видео елемент са атрибутом цонтролс постављеним на „труе“. Ово ће додати основни видео плејер на страницу.
Затим додајте дугме за репродукцију/паузу. Да бисте то урадили, мораћете да додате неколико линија кода компоненти плејера. Додајте следећи код у датотеку Плаиер.јс:
увоз Реагујте, { усеСтате, усеРеф } из 'реаговати';конст Играч = () => {
конст [исПлаиинг, сетИсПлаиинг] = усеСтате(лажно);
конст видеоРеф = усеРеф(нула);
конст тогглеПлаи = () => {
иф (исПлаиинг) {
видеоРеф.Тренутни.пауза();
} друго {
видеоРеф.Тренутни.игра();
}
сетИсПлаиинг(!исПлаиинг);
};
повратак (
<див>
<видео
реф={видеоРеф}
видтх="100%"
висина="100%"
контроле
>
<извор срц="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" типе="видео/мп4" />
</video>
<дугме онЦлицк={тогглеПлаи}>
{репродукује? "Пауза": "Игра"}
</button>
</div>
)
}
извозУобичајено Плаиер;
Овај код користи кукице усеСтате и усеРеф да бисте пратили стање видеа (било да се репродукује или паузирао) и референцу на видео елемент. Такође додаје функцију тогглеПлаи која ће репродуковати и паузирати видео. Елемент дугмета ће покренути функцију тогглеПлаи.
Последњи корак је додавање траке напретка. Да бисте то урадили, мораћете да додате још неколико линија кода у датотеку Плаиер.јс. Додајте следеће:
увоз Реагујте, { усеСтате, усеРеф } из 'реаговати';конст Играч = () => {
конст [исПлаиинг, сетИсПлаиинг] = усеСтате(лажно);
конст [прогресс, сетПрогресс] = усеСтате(0);
конст видеоРеф = усеРеф(нула);
конст тогглеПлаи = () => {
иф (исПлаиинг) {
видеоРеф.Тренутни.пауза();
} друго {
видеоРеф.Тренутни.игра();
}
сетИсПлаиинг(!исПлаиинг);
};
конст хандлеПрогресс = () => {
конст трајање = видеоРеф.цуррент.дуратион;
конст цуррентТиме = видеоРеф.цуррент.цуррентТиме;
конст напредак = (тренутно време / трајање) * 100;
сетПрогресс (прогрес);
};
повратак (
<див>
<видео
онТимеУпдате={хандлеПрогресс}
реф={видеоРеф}
видтх="100%"
висина="100%"
контроле
>
<извор срц="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" типе="видео/мп4" />
</video>
<див>
<дугме онЦлицк={тогглеПлаи}>
{репродукује? "Пауза": "Игра"}
</button>
<вредност напретка={прогрес} мак="100" />
</div>
</div>
)
}
извозУобичајено Плаиер;
Овај код додаје функцију хандлеПрогресс. Ова функција ће ажурирати траку напретка. Такође додаје слушалац догађаја онТимеУпдате видео елементу који ће покренути функцију хандлеПрогресс. Коначно, додаје елемент прогреса на страницу са атрибутима вредности и мак постављеним на напредак и 100, респективно.
Коришћење библиотека трећих страна
Друга опција за креирање видео плејера у Реацт-у је коришћење библиотека трећих страна. Доступне су многе библиотеке, али неке од најпопуларнијих су РеацтПлаиер и Реацт-медиа-плаиер.
РеацтПлаиер
РеацтПлаиер је једноставна, лагана библиотека која вам омогућава да креирате видео плејер са само неколико линија кода. Да бисте га инсталирали, покрените следећу команду у свом терминалу:
нпм инсталирај реаговати-играчЈедном инсталиран, можете га користити овако:
увоз Реаговати из 'реаговати';
увоз РеацтПлаиер из 'реацт-плаиер';конст Играч = () => {
повратак (
<РеацтПлаиер
урл="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
видтх="100%"
висина="100%"
контроле
/>
)
}
извозУобичајено Плаиер;
Овај код увози компоненту РеацтПлаиер из библиотеке реацт-плаиера и додаје је на страницу. Поставља УРЛ, ширину, висину и атрибуте контроле. Погледајте сваки од ових параметара један по један:
- урл: Ово је УРЛ видео снимка који желите да пустите.
- ширина: Ово је ширина видео плејера.
- висина: Ово је висина видео плејера.
- контроле: Ово је логички атрибут који одређује да ли ће видео плејер имати контроле или не.
реацт-видео-јс-плаиер
реацт-видео-јс-плаиер је још једна једноставна, лагана библиотека која вам омогућава да креирате видео плејер са само неколико линија кода. Да бисте га инсталирали, покрените следећу команду у свом терминалу:
нпм инсталирај реацт-видео-јс-плаиерЈедном инсталиран, можете га користити овако:
увоз Реаговати из "реаговати";
увоз Видео плејер из "реацт-видео-јс-плаиер";конст Играч = () => {
повратак (
<Видео плејер
видтх="100%"
висина="100%"
срц="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
контроле
/>
)
}
извозУобичајено Плаиер;
Овај код увози компоненту ВидеоПлаиер из библиотеке реацт-видео-јс-плаиер и додаје је на страницу.
Додатне функције видео плејера
Можете да додате додатне функције свом видео плејеру, као што су:
- Додавање постера: Можете додати слику постера у свој видео плејер тако што ћете поставити атрибут постер видео елемента на УРЛ слике.
- Петља: Можете да направите петљу за свој видео тако што ћете атрибут петље видео елемента поставити на „труе“.
- Искључен звук: Можете да искључите звук свог видеа тако што ћете атрибут искљученог звука видео елемента поставити на „труе“.
- Аутоматско покретање: Можете аутоматски да репродукујете свој видео тако што ћете атрибут аутоматске репродукције видео елемента поставити на „труе“.
Такође можете додати сопствене прилагођене контроле видео плејеру. Да бисте то урадили, мораћете да додате слушаоце догађаја видео елементу и напишете функције за контролу видеа.
Повећајте ангажовање корисника помоћу видео плејера
Са правим алатима и техникама, лако можете да направите видео плејер у Реацт-у. Такође можете додати додатне функције за повећање ангажовања корисника. Медиа плејери су одличан начин да повећате ангажовање корисника на вашој веб локацији или апликацији.
Након што додате видео плејер на своју веб локацију, обавезно пратите ангажовање корисника да бисте видели да ли има жељени ефекат. Такође можете да примените А/Б тестирање да бисте видели да ли додавање видео плејера повећава стопе конверзије.