Создание видеоплеера в 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 — использование сторонних библиотек. Доступно множество библиотек, но наиболее популярными являются 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, ширину, высоту и атрибуты управления. Взгляните на каждый из этих параметров один за другим:
- URL-адрес: это URL-адрес видео, которое вы хотите воспроизвести.
- ширина: это ширина видеоплеера.
- высота: это высота видеоплеера.
- элементы управления: это логический атрибут, который указывает, будет ли видеопроигрыватель включать элементы управления.
реагировать-видео-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 и добавляет его на страницу.
Дополнительные возможности видеоплеера
Вы можете добавить в свой видеоплеер дополнительные функции, например:
- Добавьте постер: вы можете добавить изображение постера в свой видеоплеер, задав атрибуту «постер» элемента видео URL-адрес изображения.
- Цикл: вы можете зациклить видео, установив для атрибута цикла элемента видео значение true.
- Отключение звука: вы можете отключить звук видео, установив для атрибута muted видеоэлемента значение true.
- Автозапуск: вы можете воспроизводить видео автоматически, установив для атрибута автозапуска видеоэлемента значение true.
Вы также можете добавить свои собственные элементы управления в видеоплеер. Для этого вам нужно будет добавить прослушиватели событий к элементу видео и написать функции для управления видео. Проверять Лучшие способы исправить ошибку «Это видео не может быть воспроизведено» на Google Диске.
Увеличьте взаимодействие пользователя с видеоплеером
С правильными инструментами и методами вы можете легко создать видеоплеер в React. Вы также можете добавить дополнительные функции для повышения вовлеченности пользователей. Медиаплееры — отличный способ повысить вовлеченность пользователей на вашем веб-сайте или в приложении.
После добавления видеоплеера на свой веб-сайт обязательно отслеживайте взаимодействие с пользователем, чтобы увидеть, дает ли он желаемый эффект. Вы также можете опубликовать A/B-тест, чтобы узнать, увеличивает ли добавление видеоплеера коэффициент конверсии. Вы можете просмотреть сейчас Лучшие способы повысить коэффициент конверсии вашего сайта.