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自定义视频全屏按钮的文章就介绍到这了,更多相关React自定义按钮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React Native悬浮按钮组件的示例代码

    React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve

  • react-native-video实现视频全屏播放的方法

    react-native-video是github上一个专用于React Native做视频播放的组件.这个组件是React Native上功能最全最好用的视频播放组件,还在持续开发之中,虽然还有些bug,但基本不影响使用,强力推荐. 本篇文章主要介绍下怎么使用react-native-video播放视频,以及如何实现全屏播放,屏幕旋转时视频播放器大小随之调整,显示全屏或收起全屏. 首先来看看react-native-video有哪些功能. 基本功能 控制播放速率 控制音量大小 支持静音功能 支

  • React-Native中使用验证码倒计时的按钮实例代码

    开发过程中有获取手机验证码的场景,这时候有这样的要求: 1,点击"获取验证码"的按钮,发起获取验证码的网络请求,同时按钮置为不可用 2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取) 3,如果网络请求失败,按钮置为可用 4,倒计时结束,按钮可用 直接上代码 源码 import React,{PropTypes} from 'react'; import {View,Text,TouchableOpacity} from 'react-native'; e

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

    目录 前言 一.绘制全屏按钮 二.编写点击事件 三.编写相关函数 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 React自定义视频全屏按钮,实现全屏功能. 一.绘制全屏按钮 绘制全屏按钮,并绑定点击事件: render() { return ( <div className={'fullfrequency'}> <img src={require("./全屏.png") } id="picts" onClick={thi

  • iOS实现视频播放全屏和取消全屏功能

    本文实例为大家分享了iOS实现视频播放和取消全屏功能具体代码,供大家参考,具体内容如下 iOS 视频播放全屏和取消全屏功能实现,所需全屏的视频所在的vc需要导航控制器控制 自定义 全屏vc VedioPlayerViewController 并定义属性 /// 自定义的那个视频类 ///@property (nonatomic,strong) VedioPlayer *vedioPlayer; 在VedioPlayer中定义属性 ///视频展示的view 的父视图 @property (nona

  • C#窗体程序实现全屏及取消全屏步骤

    由于项目需要,需要用vs窗体程序实现播放视频的窗口的全屏和取消全屏. 具体实现界面如图: 这是初始状态,视频框的右上角就是控制全屏的按钮 这是全屏后的状态,此时全屏按钮变成了取消全屏的样式 注:为了界面的美观我的全屏并没有把左边的那些控件也盖住,但是是可以设置的,下边代码部分我会进行讲解. 1.首先说明一下我所用的控件及我的项目中控件的名称,以便大家理解. 显示视频的黑框是一个picturebox即代码中的VideoPlayWnd,全屏/取消全屏是一个button即代码中的button4 2.具

  • JS 全屏和退出全屏详解及实例代码

    JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧. <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

  • 用自定义图片代替原生checkbox实现全选,删除以及提交的方法

    UI妹子觉得原生的checkbox复选框太丑,非要用图片来代替,那就依她.做出来的效果类似这样: 要代替原生的checkbox. 那么要实现原生checkbox能干的事.我们主要实现这几点就可以了. 1.点击列表中的勾选图片.图片会变换成相反的. 2.如果当前是全选状态,不勾选列表中的某一项,全选处的图片变成未勾选的状态. 如果点击了某一项使列表成了全选的状态, 全选处的图片变成勾选状态. 3.全选功能 4.点击删除,能删除全部的勾选的图片. 1.准备工作:因为要大量用到两个图片的切换,我们单独

  • JavaScript全屏和退出全屏事件总结(附代码)

    代码如下: window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态 function fullscreenEnable(){ var isFullscreen = document.fullscreenEnabled || win

  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能.... 这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程! 其实,我也是这样的,哈哈哈哈..... 废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开

  • python实现录制全屏和选择区域录屏功能

    最近给客户演示程序运行结果,我就想到用Python写一个录屏程序,在网上能找到现成的源码,但是它的录屏是录制整个屏幕的.但是在屏幕桌面下方的任务栏工具栏里有些东西,不希望被录制到视频里,因此需要实现一个选择区域录屏,就像qq截图那样的.我编写的程序如下,在主函数的输入参数里有一个选项控制是全屏录制还是选择区域录制.在编写这个程序时,我有一个疑问,在初始化写视频VideoWriter函数的第4个参数,它表示视频帧的高和宽,全屏录制方式的参数是(height,width),选择区域录制的参数是(wi

  • Android开发之全屏与非全屏的切换设置方法小结

    本文实例讲述了Android开发之全屏与非全屏的切换设置方法.分享给大家供大家参考,具体如下: 静态方法 1. 代码方式 在Activity类OnCreate方法中设置,代码如下 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().se

  • js全选按钮的实现方法

    本文实例讲述了js全选按钮的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=document.

随机推荐