本篇内容介绍了“React如何自定义视频全屏按钮实现全屏功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
一、绘制全屏按钮
绘制全屏按钮,并绑定点击事件:
render() { return ( <div className={'fullfrequency'}> <img src={require("./全屏.png") } id="picts" onClick={this.fullScreen} alt="" title="全屏"/> </div> ); }
二、编写点击事件
定义全屏标识变量
this.state = { isFullScreen: false//初始为未开启全屏 }
编写fullScreen点击事件函数:
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函数
requestFullScreen = () => { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); }};
编写exitFullscreen函数
exitFullscreen = () => {var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); }};
编写监听fullscreen变化事件
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钩子上挂在监听
componentDidMount() {this.watchFullScreen(); }
“React如何自定义视频全屏按钮实现全屏功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!