React: Отключение / включение звука встроенного проигрывателя YouTube без повторного рендеринга всего компонента - PullRequest
Новая
       84

React: Отключение / включение звука встроенного проигрывателя YouTube без повторного рендеринга всего компонента

1 голос
/ 28 мая 2020

Я создал веб-приложение (используя React Js), которое показывает видео YouTube внутри проигрывателя, используя пакет response-youtube npm.

'props', переданный этому компоненту = { youtubeVideoId, streetSound, playbackSpeed }

YoutubePlayer. js Компонент: 

import React from 'react';
import YouTube from 'react-youtube';
import './style.css';

class YoutubePlayer extends React.Component {

onReady = (event) => {
    event.target.setPlaybackRate(this.props.playbackSpeed);
    event.target.playVideo();
}

render() {
    const opts = {
        playerVars: {
            autoplay: 1,
            mute: this.props.streetSound ? 0 : 1,
            modestbranding: 1,
            autohide: 1,
            showinfo: 0,
            controls: 0,
            playbackSpeed: this.props.playbackSpeed
        }
    };

    return (
        <div className='containerStyle'>

            <YouTube
                videoId={this.props.youtubeVideoId} 
                opts={opts}
                onReady={this.onReady}
                onStateChange={this.onStateChange}
                className='videoPlayerStyle'
            />

            {/* Prevents clicks on youtube player */}
            <div className='overlayStyle' />
        </div>
    );
}
}

export default YoutubePlayer;

Как я могу динамически отключать / включать видео без повторного включения -рендеринг всего компонента?

1 Ответ

1 голос
/ 28 мая 2020

Вы можете использовать Refs , см. Этот выпуск: https://github.com/tjallingt/react-youtube/issues/211

...