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

前言

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自定义视频全屏按钮的文章就介绍到这了,更多相关React自定义按钮内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。