React自定义视频全屏按钮实现全屏功能_React_

render() { return ( 
 ); }

 this.state = { isFullScreen: false//初始为未开启全屏 } 

fullScreen = () => { var picts = document.getElementById("picts"); if (!this.state.isFullScreen) { this.requestFullScreen(); picts.setAttribute("src",require("./取消全屏.png"));//全屏按钮变换 picts.setAttribute("title","退出全屏"); } else { this.exitFullscreen(); picts.setAttribute("src",require("./全屏.png"));//全屏按钮变换 picts.setAttribute("title","全屏"); } }; 

requestFullScreen = () => { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } }; 

exitFullscreen = () => { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }; 

watchFullScreen = () => { const _self = this; document.addEventListener( "webkitfullscreenchange", function() { _self.setState({ isFullScreen: document.webkitIsFullScreen }); }, false ); document.addEventListener( "fullscreenchange", function() { _self.setState({ isFullScreen: document.fullscreen }); }, false ); document.addEventListener( "mozfullscreenchange", function() { _self.setState({ isFullScreen: document.mozFullScreen }); }, false ); }; 

componentDidMount() { this.watchFullScreen(); }