React自定義視頻全屏按鈕實(shí)現(xiàn)全屏功能
更新時(shí)間：2022年11月03日 17:20:18 作者：柒留心
這篇文章主要介紹了React自定義視頻全屏按鈕實(shí)現(xiàn)全屏功能，通過繪制全屏按鈕，并綁定點(diǎn)擊事件，編寫點(diǎn)擊事件，通過實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下
提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
前言
React自定義視頻全屏按鈕，實(shí)現(xiàn)全屏功能。
一、繪制全屏按鈕
繪制全屏按鈕，并綁定點(diǎn)擊事件：
render() {
return (
<div className={'fullfrequency'}>
<img src={require("./全屏.png") } id="picts" onClick={this.fullScreen} alt="" title="全屏"/>
</div>
);
}二、編寫點(diǎn)擊事件
定義全屏標(biāo)識變量
this.state = {
isFullScreen: false//初始為未開啟全屏
}
編寫fullScreen點(diǎn)擊事件函數(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","全屏");
}
};
三、編寫相關(guān)函數(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();
}
到此這篇關(guān)于React自定義視頻全屏按鈕的文章就介紹到這了,更多相關(guān)React自定義按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- React videojs 實(shí)現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
- React+TS+IntersectionObserver實(shí)現(xiàn)視頻懶加載和自動播放功能
- react-native 封裝視頻播放器react-native-video的使用
- react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
- React中使用react-player 播放視頻或直播的方法
- react-native-video實(shí)現(xiàn)視頻全屏播放的方法
- react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換
相關(guān)文章
使用React路由實(shí)現(xiàn)頁面導(dǎo)航的示例代碼
在構(gòu)建現(xiàn)代Web應(yīng)用程序時(shí),前端路由是一個(gè)不可或缺的部分,今天,我們將討論如何在React中使用React Router來實(shí)現(xiàn)頁面導(dǎo)航,在這篇博客中,我們將會探索路由的基本概念,設(shè)置React Router,并通過示例代碼來展示如何實(shí)現(xiàn)復(fù)雜的頁面導(dǎo)航,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了React 三大屬性之state的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了如何使用React構(gòu)建一個(gè)擲骰子的小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細(xì)的示例供大家參考，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
使用React+ts實(shí)現(xiàn)無縫滾動的走馬燈詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無縫滾動的走馬燈詳細(xì)過程,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式
這篇文章主要介紹了React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了React大屏可視化腳手架教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06