Вопросы Теги

Показать фоновое видео на div в Reactjs

Я не знаю, почему я не чувствую никакого видео, добавив этот код: 

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.

3
задан 25.09.2019, 03:59
1 ответ

Если у тебя есть все осуществленное добро, 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>
3
ответ дан 01.12.2019, 22:55