Я не знаю, почему я не чувствую никакого видео, добавив этот код:
import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import './Carousel.css'
export default function Carousel() {
return (
<React.Fragment>
<CssBaseline />
<div class='vidContain'>
<div class='vid'>
<video loop autoPlay>
<source src="videocarousel.mp4" type="video/mp4" ></source>
</video>
</div>
<div class='content'> Team Manager es juego en equipo
</div>
</div>
</React.Fragment>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
.vidContain {
height: 600px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
height: 90vh;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
Дело в том, что если я заменю метку <video>
на пакет «React Player»:
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
, если он работает. Таким образом, это заставляет меня думать, что ошибка находится на ярлыке <video>
Проблема в том, что ReactPlayer не работает, потому что элементы управления YouTube кажутся мне, помимо других недостатков. Я хотел бы сделать это с тегом video.
Если у тебя есть все осуществленное добро, vГ-deo оно должно тебе функционировать таким же образом как оно функционирует, не используя React
. Если оно ты не функционирует, проблема должна быть в другой стороне. AquГ - я оставляю тебе функциональный snippet с одним vГ-deo pГєblico для того, чтобы ты увидел, что оно функционирует. Какие-то вещи, которые ты должен иметь в виду:
В JavaScript
(и следовательно в JSX
), не используй class
, это размещенное слово , asГ - что в Вашем месте в React
необходимо использовать className
, он у меня не остается ясным из-за тебя cГіdigo, из-за quГ© estГЎs применяя z-index
со стоимостью -1
к контейнеру vГ-deo. В зависимости от твоего layout или элементов, которые у тебя есть posicionados, ты можешь быть ocultГЎndolo.
EstГЎs пробуя воспроизводить vГ-deo automГЎticamente с autoPlay
, хотя это не рекомендуется, если ты не хочешь, чтобы браузеры как Chrome блокировали ее reproducciГіn, aГ±ade свойство muted
в vГ-deo .
function Carousel() {
return (
<React.Fragment>
<div className='vid'>
<video loop autoPlay muted>
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4" />
</video>
</div>
</React.Fragment>
);
}
ReactDOM.render(<Carousel/>, document.getElementById('videoApp'));
.vid {
height: 90vh;
}
.vid video {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="videoApp"></div>