視頻處理
HTML5中的視頻，使用video和source搭配扑媚，來解決瀏覽器視頻格式兼容問題腰湾，如果都不支持，可以在video里面寫提示語
<vedio>
<source src="視頻格式"/>
<source src="視頻格式"/>
<source src="視頻格式"/>
</vedio>
video支持的視頻格式
MP4 ：目前比較主流
OGG ：多用于移動端
WebM ：目前唯一支持超高清格式疆股，在HTML頁面中支持超高清格式HTML5-
vedio元素的屬性
src ：視頻路徑
autoplay ：自動播放
controls ：提供視頻播放的控制面板费坊，只有屬性名，沒有屬性值
loop ：視頻的循環(huán)播放
poster ：在視頻播放之前旬痹，顯示一張圖片
width/height ：設(shè)置顯示視頻的寬度和高度preload ：預(yù)加載 auto：(默認(rèn)值)自動加載 none：不加載 metadata：只加載視頻的基本信息(不含視頻)
視頻處理進(jìn)階
- 方法
play() ：播放視頻
pause() ：暫停視頻
load() ：重新加載音頻/視頻元素
canPlayType() ：判斷當(dāng)前瀏覽器是否支持指定視頻格式 - 事件
onplay ：當(dāng)視頻開始播放時調(diào)用
onpause ：當(dāng)視頻開始
onended ：當(dāng)視頻結(jié)束時被觸發(fā)
onerror ：當(dāng)視頻錯誤時被觸發(fā)
oncanplay ：當(dāng)整個媒體可以順利播放時附井，就會觸發(fā)這個事件
oncanplaythrough ：不考慮整體狀態(tài)，只要下載了一定的可放幀會會觸發(fā)這個事件
onprogress ：用于更新媒體的下載進(jìn)度唱凯，會周期性的觸發(fā) - 屬性
paused ：表示判斷當(dāng)前是否暫停羡忘，true表示暫停
ended ：表示判斷當(dāng)前視頻是否播放完畢，true表示播放完畢
duration ：表示當(dāng)前視頻的時長,單位為s
currentTime ：表示當(dāng)前視頻播放的位置
音頻處理
音頻處理和視頻處理基本上都相同磕昼，音頻處理使用audio和source搭配
<audio>
<source src="音頻格式">
<source src="音頻格式">
<source src="音頻格式">
</audio>
audio支持的音頻格式有MP3/OGG/WAV
畫布處理
如何使用畫布卷雕？
1. 在html里創(chuàng)建canvas標(biāo)簽
如果使用內(nèi)聯(lián)樣式或者樣式表改變canvas的寬和高，都會拉伸或者壓縮里面的圖形
使用canvas的寬高屬性一切正常
<canvas width="500px" height="500px"></canvas>
2. 獲取<canvas>元素
var canvas = document.getElementsByTagName('canvas')[0];
3. 獲取到畫布對象,可以理解為畫筆票从，參數(shù)是字符串漫雕，而且字母必須是小寫
var context = canvas.getContext("2d");
4. 使用canvas的API作圖，x,y,width,height, x y設(shè)置位置峰鄙，width height設(shè)置寬高浸间，位置相對于canvas
context.fileRect(10,10,100,100);常見的canvas的API
1. 繪制實心矩形
fillRect(x,y,width,heigth);
2. 繪制空心矩形
strokeRect(x,y,width,heigth);
3. 清除指定區(qū)域的像素，類似于橡皮擦
clearRect(x,y,width,height);-
設(shè)置顏色和透明度：如果在創(chuàng)建圖像時吟榴，沒有指定顏色魁蒜，那么所有圖形都會使用純黑色。在繪制之前設(shè)置顏色和透明度，繪制之后再設(shè)置是無效的兜看。
圖形的透明度：context.globalAlpha = 0.3; 圖形內(nèi)部區(qū)域的顏色：context.fillStyle = "blue"; 圖形線條的顏色：context.strokeStyle = "green";
