共享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"，"全屏");
}
};
编写相关函数
编写requestfulscren函数
requestFullScreen = () => {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
};
编写exitfulscren函数
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();
}
你可以试试。如果你有问题，你可以咨询！
