Unit02： HTML5 視頻處理、音頻處理

時間 2019-11-21

標籤 unit02 unit html5 html 視頻處理音頻欄目 HTML5 简体版

原文原文鏈接

1.視頻處理：html

1.<video src="一種格式" autoplay></video>標籤不影響HTML頁面，耗顯卡和cpu前端

若是當前瀏覽器不支持video元素，能夠在video元素內編寫提示信息；<video>瀏覽器不支持</video> *****web

<video>支持的視頻格式編程

MP4格式 - 目前比較主流瀏覽器

OGG格式 - 多用於移動端緩存

WebM格式 - 目前惟一支持超高清格式ide

* 在HTML頁面中支持超高清格式(HTML5)oop

* 由Google公司推出的post

屬性：spa

- src 引入路徑

支持的視頻格式：

.mp4(主流)

.ogv(OGG格式的一種，用於移動端)

.webm(在HTML5頁面中，目前惟一支持超高清格式 1080p，由Google退出)

- autoplay 自動播放;只定義屬性名，沒有屬性值

- controls 視頻播放的控制面板;只定義屬性名，沒有屬性值

- loop 視頻循環播放;只定義屬性名，沒有屬性值

- poster="img" 播放以前先引入一張圖片

- width,height

- preload 預加載

auto 自動加載，儘快加載完畢，默認

none 不加載（不能被緩存，版權保護）

metadata只加載視頻基本信息（視頻名稱，寬高等，不包含視頻）

2.在video元素中能夠包含多個<source>元素,能夠放不一樣格式的相同視頻，兼容各個瀏覽器；

瀏覽器不支持

</video>

高級內容：

方法：

- play() 視頻播放

- pause() 視頻暫停

- load() 視頻加載

- canPlayType() 判斷瀏覽器是否支持指定視頻格式；

事件：

- play 視頻播放時觸發

- pause 視頻暫停時觸發

- ended 視頻結束時觸發第一集播完指向第二集改變src

- error 視頻播放「錯誤」時觸發

- canplay 不考慮總體狀況下，只要能播放就播放

- canplaythrough考慮總體

- progress 視頻加載的進度

屬性：表示判斷的返回布爾值 true/false

- paused 判斷當前是否暫停

- ended 判斷當前是否播放完畢

- duration 表示當前視頻的時長

- currentTime 表示當前視頻播放的位置

例子:自定義控制面板

問題：video元素與其餘元素是相對定位時，當video視頻全屏時，默認在瀏覽器最前端，廣告被覆蓋；因此不能全屏；

解決：利用video元素提供的高級編程本身實現；

使用目前封裝好的video的js庫；

【video-js庫】

<!DOCTYPE html>
<html>
 <head>
  <title>video</title>
  <meta charset="utf-8" />
 </head>

 <body>

<video controls style="width:640px;height:400px;background:#000;" poster="DATA/oceans-clip.png">
    你的瀏覽器不支持視頻
    <source src="DATA/oceans-clip.mp4" />
    <source src="DATA/oceans-clip.ogv" />
    <source src="DATA/oceans-clip.webm" />
</video>

 <video src="DATA/oceans-clip.mp4" autoplay loop poster="DATA/oceans-clip.png" style="width:1000px;">你的瀏覽器不支持視頻</video>
 </body>
</html>