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