React.MuteUnmuteYoutube embed player MuteUnmuteyoutube嵌入播放器，无需重新渲染整个组件。

Question

我已经创建了一个web应用程序（使用React Js），它可以在播放器中显示youtube视频，使用的是 反应-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;

如何在不重新渲染整个组件的情况下动态静音视频？

Answer 1

您可以使用 裁判，请看这个问题。https:/github.comtjallingtreact-youtubeissues211。