提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
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自定义按钮内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！