React Js: Создание адаптивного Video и Audio плеера

В этом руководстве вы узнаете, как создать адаптивный видео и аудиоплеер в приложениях React js. 

Как создать отзывчивый видео и аудио плеер на React 

Выполните следующие шаги и создайте отзывчивый видео и аудиоплеер в приложениях React js: 

• Шаг 1 - Создадим приложение React
• Шаг 2 - Установим медиа-пакет React Js
• Шаг 3 - Создадим простой компонент (Компонент видеоплеера и компонент аудиоплеера)
• Шаг 4 - Добавим компонент в App.js

Шаг 1 - Создадим приложение React

На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение для react:

npx create-react-app my-react-app

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

npm start

Проверьте свое приложение React по этому URL-адресу: localhost:3000

Шаг 2 - Установим медиа-пакет React Js

Выполните следующую команду на своем терминале, чтобы установить пакет media package:

npm install reactjs-media

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

npm start

Проверьте свое приложение React по этому URL-адресу: localhost:3000 

Шаг 3 - Создадим простой компонент

Перейдите в каталог src вашего приложения react js и создайте компоненты медиаплеера как показано ниже:

• Компонент видеоплеера
• Компонент аудиоплеера

Для компонента видеоплеера

Посетите каталог components и создайте файл MediaPlayerComponent.js и добавьте приведенный ниже код для создания адаптивного видеоплеера в react:

import React, { Component } from "react";
import { ReactVideo } from "reactjs-media";
 
 
class MediaPlayerComponent extends Component {
   
  render() {
    return (
      <div>
        <ReactVideo
            src='/myvideo.mp4'
            poster='/poster.png'
            primaryColor="red"
            autoPlay
        />
      </div>
    );
  }
 
}
 
export default MediaPlayerComponent;

Для компонента аудиоплеера

Посетите каталог components и создайте файл MediaPlayerComponent.js и добавьте приведенный ниже код для создания отзывчивого аудиоплеера в react:

import React, { Component } from "react";
import { ReactAudio } from "reactjs-media";
 
 
class MediaPlayerComponent extends Component {
   
  render() {
    return (
      <div>
         <ReactAudio
              src="/your_audio_file.mp4"
              poster="/your_poster_file.png"
          />
      </div>
    );
  }
 
}
 
export default MediaPlayerComponent;

Шаг 4 - Добавим компонент в App.js

На этом этапе вам нужно добавить файл ImageUploadPreviewComponent.js в файл src/App.js: 

import React from 'react';
import './App.css';
 
import MediaPlayerComponent from './components/MediaPlayerComponent';
 
function App() {
  return (
    <div className="App">
      <MediaPlayerComponent />
    </div>
  );
}
 
export default App;

Благодаря этому руководству вы узнали, как использовать медиа-плагин react js для разработки собственного видео и аудиоплеера.