基于React怎样实现视频全屏按钮 代码是啥

这篇文章主要介绍了“基于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怎样实现视频全屏按钮，代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!