文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 19: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自定义按钮内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯