Как создать видеоплеер в React

Создание видеоплеера в React может показаться сложной задачей. Но с правильными инструментами и методами вы можете сделать это относительно легко.

Есть несколько простых способов создать видеоплеер в React: используя встроенные функции и используя сторонние библиотеки. Проверять Как создавать объекты перетаскивания в React.

Как создать видеоплеер в React - Учебники

Создайте видеоплеер в React

Прежде чем создавать видеоплеер React, убедитесь, что у вас есть базовые знания HTML, CSS и JavaScript.

Начните с создания базового приложения React, чтобы добавить в него следующие функции видеоплеера.

Используйте встроенные функции (перехватчики взаимодействия)

Первый вариант создания видеоплеера в React — использовать встроенные функции.

Начните с создания компонента проигрывателя, который будет отображать видео и все его элементы управления. Для этого создайте файл с именем «Player.js» и добавьте следующий код:

import React from ‘react’;

const Player = () => {
 return (
 <div>
 <video width=”100%” height=”100%” controls>
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 </div>
 )
}

export default Player;

Этот код импортирует библиотеку React и создает компонент запуска. Он также добавляет элемент видео с атрибутом управления, для которого установлено значение true. Это добавит основной видеопроигрыватель на страницу.

Затем добавьте кнопку воспроизведения/паузы. Для этого вам нужно будет добавить несколько строк кода в конфигуратор лаунчера. Добавьте следующий код в файл Player.js:

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

return (
 <div>
 <video
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 </div>
 )
}

export default Player;

Этот код использует ловушку использование состояния و использоватьRef Отслеживает статус видео (воспроизведение или пауза) и указывает элемент видео. Это также добавляет функциональности togglePlay который будет воспроизводить и приостанавливать видео. Элемент кнопки вызовет функцию togglePlay.

Последним шагом является добавление индикатора выполнения. Для этого вам потребуется добавить несколько строк кода в файл Player.js. Вам необходимо добавить следующее:

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const [progress, setProgress] = useState(0);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

const handleProgress = () => {
 const duration = videoRef.current.duration;
 const currentTime = videoRef.current.currentTime;
 const progress = (currentTime / duration) * 100;
 setProgress(progress);
 };
 return (
 <div>
 <video
 onTimeUpdate={handleProgress}
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 <div>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 <progress value={progress} max=”100" />
 </div>
 </div>
 )
}

export default Player;

Этот код добавляет функцию ручкаПрогресс. Эта функция обновит индикатор выполнения. Код также добавляет прослушиватель событий onTimeUpdate к элементу видео, который вызовет функцию handleProgress. Наконец, вы добавляете на страницу элемент прогресса с установленными значениями атрибутов, максимальным прогрессом и 100 соответственно. Проверять Как настроить мышь для комфортного использования.

Как создать видеоплеер в React - Учебники

Использование сторонних библиотек

Второй вариант создания видеоплеера в React — использование сторонних библиотек. Доступно множество библиотек, но наиболее популярными являются ReactPlayer и React-media-player.

ReactPlayer

ReactPlayer — это простая и легкая библиотека, позволяющая создать видеоплеер всего несколькими строками кода. Чтобы установить их, выполните следующую команду в Терминале:

npm install react-player

После установки вы можете использовать его следующим образом:

import React from ‘react’;
import ReactPlayer from ‘react-player’;

const Player = () => {
 return (
 <ReactPlayer
 url=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 width=”100%”
 height=”100%”
 controls
 />
 )
}

export default Player;

Этот код импортирует компонент ReactPlayer из библиотеки ReactPlayer и добавляет его на страницу. Он устанавливает URL, ширину, высоту и атрибуты управления. Взгляните на каждый из этих параметров один за другим:

  1. URL-адрес: это URL-адрес видео, которое вы хотите воспроизвести.
  2. ширина: это ширина видеоплеера.
  3. высота: это высота видеоплеера.
  4. элементы управления: это логический атрибут, который указывает, будет ли видеопроигрыватель включать элементы управления.

Как создать видеоплеер в React - Учебники

реагировать-видео-js-плеер

react-video-js-player — еще одна простая и легкая библиотека, позволяющая создать видеоплеер всего несколькими строками кода. Чтобы установить их, выполните следующую команду в Терминале:

npm install react-video-js-player

После установки вы можете использовать его следующим образом:

import React from “react”;
import VideoPlayer from “react-video-js-player”;

const Player = () => {
 return (
 <VideoPlayer
 width=”100%”
 height=”100%”
 src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 controls
 />
 )
}

export default Player;

Этот код импортирует компонент VideoPlayer из библиотеки react-video-js-player и добавляет его на страницу.

Как создать видеоплеер в React - Учебники

Дополнительные возможности видеоплеера

Вы можете добавить в свой видеоплеер дополнительные функции, например:

  1. Добавьте постер: вы можете добавить изображение постера в свой видеоплеер, задав атрибуту «постер» элемента видео URL-адрес изображения.
  2. Цикл: вы можете зациклить видео, установив для атрибута цикла элемента видео значение true.
  3. Отключение звука: вы можете отключить звук видео, установив для атрибута muted видеоэлемента значение true.
  4. Автозапуск: вы можете воспроизводить видео автоматически, установив для атрибута автозапуска видеоэлемента значение true.

Вы также можете добавить свои собственные элементы управления в видеоплеер. Для этого вам нужно будет добавить прослушиватели событий к элементу видео и написать функции для управления видео. Проверять Лучшие способы исправить ошибку «Это видео не может быть воспроизведено» на Google Диске.

Увеличьте взаимодействие пользователя с видеоплеером

С правильными инструментами и методами вы можете легко создать видеоплеер в React. Вы также можете добавить дополнительные функции для повышения вовлеченности пользователей. Медиаплееры — отличный способ повысить вовлеченность пользователей на вашем веб-сайте или в приложении.

После добавления видеоплеера на свой веб-сайт обязательно отслеживайте взаимодействие с пользователем, чтобы увидеть, дает ли он желаемый эффект. Вы также можете опубликовать A/B-тест, чтобы узнать, увеличивает ли добавление видеоплеера коэффициент конверсии. Вы можете просмотреть сейчас Лучшие способы повысить коэффициент конверсии вашего сайта.

Источник
Перейти к верхней кнопке