React自定義視頻全屏按鈕實現(xiàn)全屏功能

更新時間：2022年11月03日 17:20:18 作者：柒留心

這篇文章主要介紹了React自定義視頻全屏按鈕實現(xiàn)全屏功能，通過繪制全屏按鈕，并綁定點擊事件，編寫點擊事件，通過實例代碼給大家詳細講解,需要的朋友可以參考下

前言

React自定義視頻全屏按鈕，實現(xiàn)全屏功能。

一、繪制全屏按鈕

繪制全屏按鈕，并綁定點擊事件：

render() {
    return (
          <div className={'fullfrequency'}>
          <img src={require("./全屏.png") } id="picts" onClick={this.fullScreen} alt="" title="全屏"/>
          </div>
    );
  }

二、編寫點擊事件

定義全屏標識變量

  this.state = {
      isFullScreen: false//初始為未開啟全屏
  }

編寫fullScreen點擊事件函數(shù)：

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","全屏");
    }
};

三、編寫相關函數(shù)

編寫requestFullScreen函數(shù)

requestFullScreen = () => {
  	var de = document.documentElement;
  	if (de.requestFullscreen) {
    	de.requestFullscreen();
  	} else if (de.mozRequestFullScreen) {
    	de.mozRequestFullScreen();
  	} else if (de.webkitRequestFullScreen) {
    	de.webkitRequestFullScreen();
  	}
};

編寫exitFullscreen函數(shù)

exitFullscreen = () => {
	var de = document;
  	if (de.exitFullscreen) {
    	de.exitFullscreen();
  	} else if (de.mozCancelFullScreen) {
   	 de.mozCancelFullScreen();
  	} else if (de.webkitCancelFullScreen) {
    	de.webkitCancelFullScreen();
  	}
};

編寫監(jiān)聽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鉤子上掛在監(jiān)聽

componentDidMount() {
this.watchFullScreen();  
}

到此這篇關于React自定義視頻全屏按鈕的文章就介紹到這了,更多相關React自定義按鈕內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用React路由實現(xiàn)頁面導航的示例代碼
在構建現(xiàn)代Web應用程序時,前端路由是一個不可或缺的部分,今天,我們將討論如何在React中使用React Router來實現(xiàn)頁面導航,在這篇博客中,我們將會探索路由的基本概念,設置React Router,并通過示例代碼來展示如何實現(xiàn)復雜的頁面導航,需要的朋友可以參考下
2025-02-02
React 三大屬性之state的使用詳解
這篇文章主要介紹了React 三大屬性之state的使用詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下
2021-04-04
如何使用React構建一個擲骰子的小游戲
這篇文章主要介紹了如何使用React構建一個擲骰子的小游戲,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-12-12
基于React實現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細的示例供大家參考，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-03-03
在React中編寫class樣式的方法總結
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細,需要的朋友可以參考下
2024-07-07
使用React+ts實現(xiàn)無縫滾動的走馬燈詳細過程
這篇文章主要給大家介紹了關于使用React+ts實現(xiàn)無縫滾動的走馬燈詳細過程,文中給出了詳細的代碼示例以及圖文教程,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-08-08
React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式
這篇文章主要介紹了React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
create-react-app常用自定義配置教程示例
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06
React從命令式編程到聲明式編程的原理解析
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
React大屏可視化腳手架教程示例
這篇文章主要為大家介紹了React大屏可視化腳手架教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06