Блог

Главная - Вопросы по программированию - Не удается изменить размер видео в проигрывателе React

Не удается изменить размер видео в проигрывателе React

#javascript #css #reactjs #react-player

#javascript #css #reactjs #react-player

Вопрос:

Не удается изменить размер видео в проигрывателе React. Я меняю ширину на любое число, и видео остается неизменным. Я пытаюсь оптимизировать его для просмотра на компьютере, а затем добавить точки останова для изменения размера для экранов меньшего размера, таких как телефоны.

Ниже приведен файл, в котором я визуализирую видео с React-плеером внутри a, к которому я применяю желаемую высоту и ширину, которые я хотел бы использовать для своего видео с react-плеером.

 import React, { useContext, useEffect, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Modal from '@material-ui/core/Modal'
import { MovieContext } from './MovieContext'
import ReactPlayer from 'react-player'
import { getTrailer } from '../utils/movieDB'
// potential of adding controls
// import { Slider, Direction } from 'react-player-controls'
//slider to be implemented
//https://www.npmjs.com/package/react-player-controls#playericon-

const useStyles = makeStyles((theme) => ({
  video: {
    width: 'auto',
    height: 'auto',
    top: '25%',
    right: '25%',
    position: 'fixed',
    [theme.breakpoints.down('xs')]: {},
  },
}))

const styles = {
  player: {
    width: '300px',
  },
}

export default function SimpleModal({ open }) {
  const classes = useStyles(),
    //receives movie from Home > DisplayCard > MovieContext
    { setOpenTrailer, movie, setMovie } = useContext(MovieContext),
    [trailer, setTrailer] = useState(),
    [key, setKey] = useState(),
    [modalStyle] = useState()

  useEffect(() => {
    if (movie) {
      getTrailer(movie).then((data) => {
        setKey(data.videos.results[0].key)
        setTrailer(data)
      })
    }
  }, [movie])

  const handleOpen = () => {
    setOpenTrailer(true)
  }

  const handleClose = () => {
    setOpenTrailer(false)
    setMovie(undefined)
    setTrailer(undefined)
    setKey(undefined)
  }

  const renderVideo = (
    <>
      {key amp;amp; (
        <div className={classes.video}>
          <ReactPlayer style={styles.player} url={`https://www.youtube.com/watch?v=${key}`} />
        </div>
      )}
    </>
  )

  return (
    <div>
      <Modal
        open={open || false}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {renderVideo}
      </Modal>
    </div>
  )
}

Как правильно установить размеры для объекта react-Player?

Комментарии:

1. Пожалуйста, вставьте свой css

2. Как говорится в документации react-player, вы можете использовать параметры width и height для регулировки ширины и высоты проигрывателя.

3. Спасибо, я пытался использовать стили react для использования точек останова, но я просто использую media query.

Ответ №1:

Использование реквизитов ширины и высоты как таковых:

 <ReactPlayer
 width={“300px”}
 url={`https://www.youtube.com/watch?v=${key}`} />

Ответ №2:

этот код взят из библиотеки react-Player. Это сделало мое видео отзывчивым

его из: https://github.com/cookpete/react-player

 class ResponsivePlayer extends Component {
  render () {
    return (
      <div className='player-wrapper'>
        <ReactPlayer
          className='react-player'
          url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
          width='100%'
          height='100%'
        />
      </div>
    )
  }
}

—— CSS ——

 .player-wrapper {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}
Метки: