这篇文章主要介绍了“基于React怎样实现视频全屏按钮，代码是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于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怎样实现视频全屏按钮，代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 新手如何学习JavaScript递归，有哪些经典的实例

  递归是算法中一个重要的解法,因此,有必要单拎出来讲讲,所以下面这篇文章主要给大家介绍了关于JavaScript递归经典案例题的相关资料,需要的朋友可以参考下

• JS的发展过程是怎样，定义和优缺点是什么

  本篇文章给大家带来了关于javascript的相关知识，主要介绍了JavaScript的起源与发展，JavaScript作为赋予网页生命的前端基础技术，它可以实现相应的效果和交互，是前端开发不可或缺的基本配置之一，下面一起来了解一下JavaScript的前世今生，希望对大家有帮助。

• 用Angular如何制作树形二级表格，代码是什么

  这篇文章主要介绍了angular手写树形二级表格的完整代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• Vue框架中怎么实现右键菜单的效果

  今天给大家分享的是，如何在最短的时候内实现右键菜单。高效实现需求，避免重复造轮子。感兴趣的可以了解一下

• JavaScript中用set怎样实现数组去重？

  JavaScript中用set怎样实现数组去重？JavaScript实现数组去重的方法有很多，这里我们主要介绍的用set进行数组去重的方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。