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

米仓里的子神君 · 发表于 2023-1-2 18:33:18

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

前言

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自定义按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266656.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！