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

本篇内容介绍了“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如何自定义视频全屏按钮实现全屏功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！