×

React应用:React自定义视频全屏按钮且实现全屏功能。

作者:Web前端之家2022.11.04来源:Web前端之家浏览:378评论:0
关键词: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();  
}

大家是可以试试,如果有问题可以咨询哦!

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/react20221104a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

ad

最新留言

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

  • derv3

    现在已经很多开源CMS了,对于个人来说,自己开发难度极大。...

  • derv3

    Cookies很多用途吧...

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2