Рубрики
React React-project

Вывод видео на экран

Создание страницы для отображения видео

src\routes\Video\Video.js

импортирование сущности react-player
компонент принимает url, это адрес к видео, которое мы хотим воспроизвести

import React from 'react'
import Office from './../../layouts/office/Office';
import ReactPlayer from 'react-player';
import NET from './../../network';

const Video= () =>{
 return (
<Office>
 <div>
<ReactPlayer 
воспроизвести статическое видео на сервере laravel
для youtobe url={`https://www.youtube.com/xxx`}
url={`${NET.WEB_URL}/video.mp4`}
воспроизвести сразу
playing={true}
панель управления над видео
controls="true"
/>
</div>
</Office>
)
}
export default Video

src\App.js

import {General} from './routes/General/General';
import {Courses} from './routes/Courses/Courses';
import {Shop} from './routes/Shop/Shop';
import {News} from './routes/News/News';
import Video from './routes/Video/Video';

import ReducerData from './context/Data/ReducerData';
import StateData from './context/Data/StateData';
import ContextData from './context/Data/ContextData';
function App(){
 const [stateData,dispatchData]=React.useReducer(ReducerData,StateData)
 return (
<Switch>
<ContextData.Provider value={{stateData,dispatchData}}>
 <Route path="/" exact component={General} />
 <Route path="/courses"component={Courses} />
 <Route path="/shop"component={Shop} />
 <Route path="/news"component={News} />
 <Route path="/video"component={Video} />
</ContextData.Provider>
</Switch>
);
}

export default App;

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *