Создание видеоплеера в React может показаться сложной задачей. Но с правильными инструментами и методами вы можете сделать это относительно легко.
Есть два способа создать видеоплеер в React: с помощью встроенных функций и с помощью сторонних библиотек.
Создание видеоплеера в React
Прежде чем создавать видеоплеер React, убедитесь, что у вас есть базовые знания HTML, CSS и JavaScript.
Начать с создание базового приложения React чтобы добавить следующие функции видеоплеера.
Использование встроенных функций (React Hooks)
Первый вариант создания видеоплеера в React — использовать встроенные функции.
Начните с создания компонента проигрывателя, который будет отображать видео и все его элементы управления. Для этого создайте файл с именем «Player.js» и добавьте следующий код:
Импортировать Реагировать от 'реагировать';константа Игрок = () => {
возвращаться (
<див>
<ширина видео ="100%" высота="100%" контролирует>
<источник источник ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" тип="видео/mp4" />
</video>
</div>
)
}экспортпо умолчанию Игрок;
Этот код импортирует библиотеку React и создает компонент проигрывателя. Он также добавляет элемент видео с атрибутом управления, установленным на «true». Это добавит основной видеоплеер на страницу.
Затем добавьте кнопку воспроизведения/паузы. Для этого вам нужно добавить несколько строк кода в компонент проигрывателя. Добавьте следующий код в файл Player.js:
Импортировать Реагировать, {useState, useRef} от 'реагировать';константа Игрок = () => {
константа [isPlaying, setIsPlaying] = useState(ЛОЖЬ);
константа видеоRef = использоватьRef(нулевой);
константа togglePlay = () => {
если (играет) {
видеоСсылка.текущий.Пауза();
} еще {
видеоСсылка.текущий.играть();
}
setIsPlaying(!Играет);
};
возвращаться (
<див>
<видео
ссылка = {videoRef}
ширина ="100%"
высота="100%"
контролирует
>
<источник источник ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" тип="видео/mp4" />
</video>
<кнопка onClick={togglePlay}>
{играет? "Пауза": "Играть"}
</button>
</div>
)
}
экспортпо умолчанию Игрок;
Этот код использует хуки useState и useRef чтобы отслеживать состояние видео (воспроизведение или пауза) и ссылку на элемент видео. Он также добавляет функцию togglePlay, которая будет воспроизводить и приостанавливать видео. Элемент кнопки вызовет функцию togglePlay.
Последний шаг — добавить индикатор выполнения. Для этого вам нужно добавить еще несколько строк кода в файл Player.js. Добавьте следующее:
Импортировать Реагировать, {useState, useRef} от 'реагировать';константа Игрок = () => {
константа [isPlaying, setIsPlaying] = useState(ЛОЖЬ);
константа [прогресс, setProgress] = useState(0);
константа видеоRef = использоватьRef(нулевой);
константа togglePlay = () => {
если (играет) {
видеоСсылка.текущий.Пауза();
} еще {
видеоСсылка.текущий.играть();
}
setIsPlaying(!Играет);
};
константа handleProgress = () => {
константа продолжительность = videoRef.current.duration;
константа текущее время = videoRef.current.currentTime;
константа прогресс = (текущее время / продолжительность) * 100;
setProgress (прогресс);
};
возвращаться (
<див>
<видео
onTimeUpdate={handleProgress}
ссылка = {videoRef}
ширина ="100%"
высота="100%"
контролирует
>
<источник источник ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" тип="видео/mp4" />
</video>
<див>
<кнопка onClick={togglePlay}>
{играет? "Пауза": "Играть"}
</button>
<значение прогресса={прогресс} макс="100" />
</div>
</div>
)
}
экспортпо умолчанию Игрок;
Этот код добавляет функцию handleProgress. Эта функция обновит индикатор выполнения. Он также добавляет к элементу видео прослушиватель событий onTimeUpdate, который запускает функцию handleProgress. Наконец, он добавляет на страницу элемент progress с атрибутами value и max, установленными на progress и 100 соответственно.
Использование сторонних библиотек
Второй вариант создания видеоплеера в React — использование сторонних библиотек. Доступно множество библиотек, но одними из самых популярных являются ReactPlayer и React-media-player.
ReactPlayer
ReactPlayer — это простая и легкая библиотека, позволяющая создать видеоплеер всего несколькими строками кода. Чтобы установить его, выполните следующую команду в своем терминале:
нпм установить реагирующий игрокПосле установки вы можете использовать его следующим образом:
Импортировать Реагировать от 'реагировать';
Импортировать ReactPlayer от 'реагирующий игрок';константа Игрок = () => {
возвращаться (
<ReactPlayer
URL="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ширина ="100%"
высота="100%"
контролирует
/>
)
}
экспортпо умолчанию Игрок;
Этот код импортирует компонент ReactPlayer из библиотеки react-player и добавляет его на страницу. Он устанавливает URL, ширину, высоту и атрибуты управления. Взгляните на каждый из этих параметров один за другим:
- URL: Это URL-адрес видео, которое вы хотите воспроизвести.
- ширина: Это ширина видеоплеера.
- высота: Это высота видеоплеера.
- контролирует: Это логический атрибут, который определяет, будут ли у видеопроигрывателя элементы управления или нет.
реагировать-видео-js-плеер
react-video-js-player — еще одна простая и легкая библиотека, позволяющая создать видеоплеер всего несколькими строками кода. Чтобы установить его, выполните следующую команду в своем терминале:
нпм установить реагировать-видео-js-плеерПосле установки вы можете использовать его следующим образом:
Импортировать Реагировать от "реагировать";
Импортировать Видео проигрыватель от "реагировать-видео-js-плеер";константа Игрок = () => {
возвращаться (
<Видео проигрыватель
ширина ="100%"
высота="100%"
источник="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
контролирует
/>
)
}
экспортпо умолчанию Игрок;
Этот код импортирует компонент VideoPlayer из библиотеки react-video-js-player и добавляет его на страницу.
Дополнительные функции видеоплеера
Вы можете добавить в свой видеоплеер дополнительные функции, например:
- Добавление плаката: Вы можете добавить изображение плаката в свой видеоплеер, задав атрибуту плаката элемента видео URL-адрес изображения.
- Зацикливание: Вы можете зациклить видео, установив для атрибута loop элемента video значение «true».
- Приглушено: Вы можете отключить звук своего видео, установив для атрибута muted элемента video значение «true».
- Автовоспроизведение: Вы можете автоматически воспроизводить видео, установив для атрибута autoplay элемента video значение «true».
Вы также можете добавить свои собственные элементы управления в видеоплеер. Для этого вам нужно добавить прослушиватели событий к элементу видео и написать функции для управления видео.
Увеличьте вовлеченность пользователей с помощью видеоплеера
С правильными инструментами и методами вы можете легко создать видеоплеер в React. Вы также можете добавить дополнительные функции для повышения вовлеченности пользователей. Медиаплееры — отличный способ повысить вовлеченность пользователей на вашем веб-сайте или в приложении.
После добавления видеоплеера на свой сайт обязательно отслеживайте взаимодействие пользователей, чтобы увидеть, дает ли он желаемый эффект. Вы также можете развернуть A/B-тестирование, чтобы увидеть, увеличивает ли добавление видеоплеера коэффициент конверсии.
