HTML5 簡單概括 -- 前端知識 （二）

HTML5 全屏事件

全屏事件：requestFullScreen

關閉全屏：cancelFullScreen

判斷是否全屏：fullScreenElement

  注意：現各大主流瀏覽器中因爲內核不一樣的緣由，會出現不兼容的問題，爲了讓本身的代碼能在各大主流瀏覽器中都能正常運行，因此咱們在原事件（requestFullScreen……）前添加 -- webkit（谷歌）   --  webkitRequestFullScreen；不一樣瀏覽器所添加前綴亦不相同，例如：

a. 谷歌瀏覽器 -- webkitRequestFullscreen；

b. 火狐瀏覽器 -- mozRequestFullScreen；

c. IE瀏覽器 -- msRequestFullscreen;

注意大小寫噢！！！

 

要想讓本身寫的代碼在各大主流瀏覽器中都能如期運行，咱們能夠添加 if 判斷，也就是作能力測試。如上圖所示。

 

 

HTML5中拖拽事件

 

1. 被拖拽元素有哪些事件

　　a. ondrag--元素正在拖拽時觸發---持續事件

　　b. ondragstart--元素開始拖拽觸發

　　c. ondragend -- 元素結束拖拽時觸發

　　d. ondraleave-- 當鼠標移動到元素外時觸發

注意：除了<a></a>,<img>標籤外，元素默認不能拖拽，必須給元素添加拖拽屬性 --  draggable = "true";

 HTML5 多媒體

audio：音頻標籤

video：視頻標籤，支持多格式（MP4，webm，ogv）

經常使用屬性有：

scr : 指定音頻，視頻的路徑

controls：設置或返回音頻/視頻是否顯示控件（好比播放/暫停等，在不一樣瀏覽器中樣式有所不一樣，畢竟各大主流瀏覽器的內核有所不一樣嘛）

autoplay：當頁面加載出來後自動播放音，視頻。（現用的谷歌瀏覽器加載完頁面後並不能實現自動播放，火狐仍是能夠的）

loop：實現循環播放

poster = "圖片路徑" ：這是一個視頻標籤中 的一個屬性，就是在視頻加載完但未開始播放時顯示的封面圖片。

經常使用方法有：

load()	從新加載音頻/視頻元素。
play()	開始播放音頻/視頻。
pause()	暫停當前播放的音頻/視頻。

 

　　帶有兩個源文件的音頻播放器。瀏覽器須要選擇它所支持的源文件（若是都支持則任選一個）：

<audio controls> 
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg"> 
    您的瀏覽器不支持 audio 元素。 
</audio>

<video>標籤用法同上。

註釋：IE 8 或更早版本的 IE 瀏覽器都不支持 <source> 標籤。

　　<source> 標籤爲媒體元素（好比 <video> 和 <audio>）定義媒體資源。

　　<source> 標籤容許您規定兩個視頻/音頻文件共瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。