Web前端開發學習筆記——7.編寫全屏播放按鈕
注：這是個人學習筆記，分享給大家，希望對讀者有所幫助。（原創）
昨天已經會編寫視頻播放按鈕了，今天就編寫另外一個相對簡單的全屏播放按鈕，即點擊全屏就會進入全屏狀態。
先看效果圖：
只要一點擊就進入全屏狀態
這裡我沒有給這個按鈕設置樣式，如果想要按鈕變得非常美觀，那麼對美工得有一定的理解，然而我目前只是為了能更好的自學後面的XSS，所以，在美工這一塊並沒有下功夫。如果讀者想給自己做狂拽酷炫吊炸天的個人主頁，那麼美工是得研究研究的。
如果想和我一樣，只是為了以後學習黑客技術，那麼就把功能這一塊的基礎打好。即JavaScript和HTML之間的互動。哦，對了，還有網站服務器。。。
HTML代碼框架：
加了一些註釋
和昨天的相比，只是多了一個全屏按鈕。所以看起來很簡單。
我們現在直接看JavaScript部分的代碼。
JavaScript代碼：
先注意我的變量設置
定義全屏函數
其餘的一些JavaScript我沒有放出來，因為感覺沒有必要截圖出來，已經和昨天的內容重複了。這裡主要要注意的就是瀏覽器兼容性不同就會導致如果你這部分定義函數寫的不全，有些瀏覽器可能就無法實現全屏功能。
我這裡用的是谷歌瀏覽器，在我沒有寫上第三部分的icea.webkitRequestFullscreen()的時候，谷歌瀏覽器點擊全屏按鈕是沒有任何效果的。
所以，不需要寫專業的播放控件的人，用controls="controls"這個視頻標籤屬性非常方便，而且比我們自己寫的好看，美觀。
今天內容很簡單。如果覺得有用就關注我吧，或者給文章點個贊！
點贊呦！
Web前端開發學習筆記——5.教你在自己的個性網頁中插入視頻
相關推薦
'推薦十四款常見的Web前端開發框架 以後別隻知道Bootstrap啦'
"在做web開發的時候經常會遇到一個問題，那就是，選擇什麼樣的框架來做前端開發。下面封程中把目前常用的一些前端的框架簡單的給大家介紹一下.1. BootstrapBoostrap絕對是目前最流行用得最廣泛的一款框架如上圖。它是一套優美，直觀並且給力的web設計工具包，可以用...
'你的真的懂Python？Python進階之學習筆記'
"俗話說的好，千里之行始於足下。無論做什麼基礎都是最重要的，當你以為自己“精通”某語言的時候，有沒有問過自己：“我能不能把這些知識，用最簡單的話說出來？讓不懂的人也能聽明白。”當你真正精通某語言的時候，我相信你一定能做到。如果做不到，那就需要往下看，再學習一下基礎。為了幫助...
'Web前端小白瞭解這些學習祕訣，你也能成為大神'
"新手們有一個常見的錯誤就是猶豫於判斷哪種編程語言是做好的、最該先學的。我們有很多的選擇，但你不能說那種語言“最好”。我們應該理解：說到底，什麼語言並不重要。重要的是理解數據結構、控制邏輯和設計模式。任何一種語言—甚至一種簡單的腳本語言—都會具有所有編程語言都共有的各種特徵...
好程序員web前端教程分享新手應該怎麼學習webpack
好程序員web前端教程分享新手應該怎麼學習webpack，什麼是webpack？一句話概括：webpack是一個模塊打包工具（module bundler...
前端開發：Vue.js源碼學習之《Vue3框架設計精髓》,強烈推薦
《Vue3框架設計精髓》設計初衷：圍繞Vue3.0站在框架設計者的角度，從零實現一個功能齊全的 Vue3。授人以漁新的文章將站在對”框架設計“這個更加高層次的理解之上所編寫的，即新文章將不再是源碼分析，而是讓讀者站在框架設計者的角度思考問題。拋出問題所在，思考差點什麼，提出...
web前端學習：React是什麼，為什麼要使用它？
React是Facebook內部的一個JavaScript類庫，已於1年開源，可用於創建Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些需要手動更新DOM、費力地記錄每一個狀態的日子一去不復返了——這種老舅的方式既不具備擴展性，又很難加入新的功能，就算可以，...
Vue學習筆記入門篇——安裝及常用指令介紹
介紹Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡...
Web前端開發，必須要了解的四種跨域解決方案
前言作為人們日常PC端的瀏覽的入口，瀏覽器出於安全考慮，採用了同源策略。換句話說，如果協議/域名/端口有一個不同，那麼就不符合此同源的前提。此時就需要跨域...
推薦中...