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

目录

前言一、绘制全屏按钮二、编写点击事件三、编写相关函数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

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

一、绘制全屏按钮

绘制全屏按钮，并绑定点击事件：

1. render() {
2.     return (
3.           <div className={'fullfrequency'}>
4.           <img src={require("./全屏.png") } id="picts" onClick={this.fullScreen} alt="" title="全屏"/>
5.           </div>
6.     );
7.   }

复制代码

二、编写点击事件

定义全屏标识变量

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

复制代码

编写fullScreen点击事件函数：

1. fullScreen = () => {
2.   var picts = document.getElementById("picts");
3.     if (!this.state.isFullScreen) {
4.       this.requestFullScreen();
5.       picts.setAttribute("src",require("./取消全屏.png"));//全屏按钮变换
6.       picts.setAttribute("title","退出全屏");
7.     } else {
8.       this.exitFullscreen();
9.       picts.setAttribute("src",require("./全屏.png"));//全屏按钮变换
10.       picts.setAttribute("title","全屏");
11.     }
12. };

复制代码

三、编写相关函数

编写requestFullScreen函数

1. requestFullScreen = () => {
2.           var de = document.documentElement;
3.           if (de.requestFullscreen) {
4.             de.requestFullscreen();
5.           } else if (de.mozRequestFullScreen) {
6.             de.mozRequestFullScreen();
7.           } else if (de.webkitRequestFullScreen) {
8.             de.webkitRequestFullScreen();
9.           }
10. };

复制代码

编写exitFullscreen函数

1. exitFullscreen = () => {
2.         var de = document;
3.           if (de.exitFullscreen) {
4.             de.exitFullscreen();
5.           } else if (de.mozCancelFullScreen) {
6.             de.mozCancelFullScreen();
7.           } else if (de.webkitCancelFullScreen) {
8.             de.webkitCancelFullScreen();
9.           }
10. };

复制代码

编写监听fullscreen变化事件

1. watchFullScreen = () => {
2.         const _self = this;
3.           document.addEventListener(
4.     "webkitfullscreenchange",
5.     function() {
6.       _self.setState({
7.         isFullScreen: document.webkitIsFullScreen
8.       });
9.         },
10.         false
11.         );
12.   document.addEventListener(
13.     "fullscreenchange",
14.     function() {
15.       _self.setState({
16.         isFullScreen: document.fullscreen
17.       });
18.         },
19.         false
20.         );
21.   document.addEventListener(
22.     "mozfullscreenchange",
23.     function() {
24.       _self.setState({
25.         isFullScreen: document.mozFullScreen
26.       });
27.         },
28.         false
29.         );
30. };

复制代码

在componentDidMount钩子上挂在监听

1. componentDidMount() {
2. this.watchFullScreen();  
3. }

复制代码

到此这篇关于React自定义视频全屏按钮的文章就介绍到这了,更多相关React自定义按钮内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！