HTML5音頻視頻
| # |
|
| 1 |
在 HTML 中播放音頻視頻並不容易！ |
| 2 |
直到現在，仍然不存在一項旨在網頁上顯示音頻視頻的標準。大多數音頻視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。 |
| 3 |
windows平臺的IE瀏覽器利用Activex控件來播放flash,而其它的瀏覽器則使用Netscape插件技術來播放flash。 |
| 4 |
而在HTML5 中規定了一種通過 audio/video 元素來包含音頻視頻的標準方法 |
HTML5音頻
| # |
兼容性 |
| 1 |
Safari、Chrome、Opera和Firefox不能自動播放，需要一個頁面元素上的交互 |
| 2 |
width / height 屬性沒有作用，必須使用 style 標籤裏面的樣式去控制它 |
| 瀏覽器 |
MP3 |
Wav |
Ogg |
| Internet Explorer 9+ |
YES |
NO |
NO |
| Chrome 6+ |
YES |
YES |
YES |
| Firefox 3.6+ |
NO |
YES |
YES |
| Safari 5+ |
YES |
YES |
NO |
| Opera 10+ |
NO |
YES |
YES |
HTML5視頻
| # |
兼容性 |
| 1 |
Safari、Chrome、Opera和Firefox不能自動播放，需要一個頁面元素上的交互 |
| 瀏覽器 |
MP4 |
WebM |
Ogg |
| Internet Explorer |
9+ |
YES |
NO |
| Chrome 6+ |
YES |
YES |
YES |
| Firefox 3.6+ |
NO |
YES |
YES |
| Safari 5+ |
YES |
NO |
NO |
| Opera 10.6+ |
NO |
YES |
YES |
HTML5音頻視頻常用屬性
| 屬性 |
描述 |
| src |
設置或返回音視頻的多媒體資源的值。 |
| autoplay |
設置或返回是否在就緒（加載完成）後隨即播放音視頻。 |
| controls |
設置或返回音視頻是否應該顯示控件（比如播放/暫停等）。 |
| loop |
設置或返回音視頻是否應在結束時再次播放。 |
| width |
設置或返回音視頻的 高度屬性的值（音頻的width沒有作用，必須使用 style 標籤裏面的樣式去控制）。 |
| height |
設置或返回音視頻的 寬度屬性的值（音頻的width沒有作用，必須使用 style 標籤裏面的樣式去控制）。 |
| poster |
設置或返回 視頻 的 海報封面屬性的值。 |
| muted |
設置或返回音視頻是否關閉聲音。 |
| currentTime |
設置或返回音視頻中的當前播放位置（以秒計） |
| duration |
返回當前音頻/視頻的長度（以秒計） |
| paused |
設置或返回音視頻是否暫停 |
| preload |
設置或返回音頻/視頻是否應該在頁面加載後進行加載 |
| volume |
設置或返回音頻/視頻的音量（0~1） |
| playbackRate |
設置或返回音頻/視頻播放的速度（大於1快播 小於1慢放） |
HTML5音頻視頻常用方法
| 方法 |
描述 |
| load() |
重新加載音頻/視頻元素 |
| play() |
開始播放音頻/視頻 |
| pause() |
暫停當前播放的音頻/視頻 |
HTML5音頻視頻常用事件
| 事件 |
描述 |
| pause |
當音頻/視頻已暫停時 |
| play |
當音頻/視頻已開始或不再暫停時 |
| playing |
當音頻/視頻在已因緩衝而暫停或停止後已就緒時 |
HTML5音頻視頻特殊屬性
| 屬性 |
描述 |
| controlsList（有兼容問題） |
設置或返回 不 顯示指定控件。枚舉值有（nofullscreen：不顯示全屏控件，nodownload：不顯示下載控件， noremoteplayback：不顯示遠程回放控件） |
瀏覽器不支持音頻視頻自動播放的解決方案
| # |
解決方案 |
| 1 |
在chrome 瀏覽器中輸入：chrome://flags，搜索“Autoplay policy”，默認爲“Default”，修改爲 “No user gesture is required” |
| 2 |
muted靜音的自動播放總是被允許的。 |
| 3 |
用戶已經產生交互（點擊觸摸滑動等…） ，而不是說一定要用戶點擊audio或者video去播放 |
HTML5自適應的圖片策略
讓瀏覽器能自動調節圖片尺寸。
- 分辨率切換：小屏手機屏幕上顯示網頁，那麼沒有必要在網頁上嵌入pc端的大圖片，浪費帶寬。
- 藝術方向：當網站在狹窄的屏幕上觀看時，顯示一幅包含了重要細節的裁剪版圖片，而不是顯示pc端的大圖，這樣會顯得圖片縮小，重要地方不突出。
使用srcset+sizes的切換解決方案
img 元素的srcset+sizes提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源。
srcset 屬性定義了我們允許瀏覽器選擇的圖像集合，瀏覽器可以根據寬、高和像素密度來加載相應的圖片資源。
使用srcset的寬度描述符時需要sizes屬性。
* srcset語法: “圖片路徑 物理像素, 圖片路徑 物理像素, …”
* size: “媒體查詢 css像素”
* src: 當瀏覽器不支持上面的屬性的時候，默認加載這裏
檢查sizes列表中哪個媒體條件是第一個爲真
加載srcset列表中引用的最接近所選的槽大小的圖像
//<img
// srcset="big-1400w.jpg 1440w,
// middle-1000w.jpg 1000w,
// small.jpg 750px"
// sizes="(max-width: 1920px) 1440px,
// (max-width: 1200px) 1000px,
// 750px"
// src="small.jpg " alt=""
///>
HTML5 picture 標籤
HTML5 的 <picture> 元素可以設置多張圖片。
<picture> 元素類似於 <video> 和 <audio> 元素。可以設備不同的資源，第一個設置的資源爲首選使用的：
- srcset 屬性的必須的，定義了圖片資源。
- media 屬性是可選的。
- source當中的也可以使用srcset、sizes屬性。
- 必須提供一個img元素，以備瀏覽器不支持的時候使用。
<picture>
<source media="(max-width: 799px)" srcset="img_smallflower.jpg" >
<source media="(min-width: 800px)" srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
把本來給手機用的圖片作爲 src ，其他放在 srcset 裏面，因爲電腦上瀏覽器沒啥問題（不帶 IE ）
HTML 知識題
| 題目 |
答案 |
| HTML5不支持的視頻格式 |
flv |
| Canvas 用於填充顏色的屬性 |
fillStyle |
| HTML中註釋的寫法 |
<!-- code–> |
| Canvas不依賴分辨率 |
錯誤 |
| HTML5 之前的 HTML 版本 |
HTML 4.01 |
| 建立一個有序列表 |
<ol></ol> |
| <a>鏈接的目標屬性值 |
_self、_blank、_top |
| 可以在html頁面中顯示“<” |
< |
| 表格中行的開始和結束標記 |
<tr></tr> |
