-
video標簽
如果當前瀏覽器不支持video，可以在veido里面編寫提示內容 src - 引入視頻文件的路徑 autoplay - 自動播放視頻
-
souce元素
<vedio> <source src="一種視頻格式"/> <source src="一種視頻格式"/> <source src="一種視頻格式"/> </vedio> -
video支持的視頻格式
MP4 - 目前比較主流
OGG - 多用于移動端
WebM - 目前唯一支持超高清格式
在HTML頁面中支持超高清格式HTML5
由Google公司推出 -
vedio元素的屬性
src - 視頻路徑
autoplay - 自動播放
controls屬性 - 提供視頻播放的控制面板，只有屬性名，沒有屬性值
loop - 視頻的循環播放
poster屬性 - 在視頻播放之前，顯示一張圖片
width/height - 設置顯示視頻的寬度和高度preload - 預加載
auto-(默認值)自動加載
none-不加載
metadata-只加載視頻的基本信息(不含視頻)
二、視頻處理- 高級內容 -
方法
play() - 播放視頻
pause() - 暫停視頻
load() - 重新加載音頻/視頻元素
canPlayType() - 判斷當前瀏覽器是否支持指定視頻格式 -
事件
onplay - 當視頻開始播放時調用
onpause - 當視頻暫停時觸發
onended - 當視頻結束時被觸發
onerror - 當視頻錯誤時被觸發
oncanplay - 當整個媒體可以順利播放時，就會觸發這個事件
oncanplaythrough - 不考慮整體狀態，只要下載了一定的可放幀會會觸發這個事件
onprogress - 用于更新媒體的下載進度，會周期性的觸發 -
屬性
paused - 表示判斷當前是否暫停，true表示暫停
ended - 表示判斷當前視頻是否播放完畢，true表示播放完畢
duration - 表示當前視頻的時長,單位為s
currentTime - 表示當前視頻播放的位置
三、音頻處理
-
audio元素
第一種：只支持一種音頻格式
<audio src="音頻文件路徑"></audio>第二種： 同時引入多個音頻格式
<audio> <source src="一種音頻格式"> <source src="一種音頻格式"> <source src="一種音頻格式"> </audio> -
audio元素支持的音頻格式
MP3 - 目前最主流
OGG
WAV
四、Canvas(畫布) - 簡單內容
1、 Canvas在HTML頁面提供畫布的功能
可以在頁面中繪制各種圖形
2、 canvas繪制的圖形與HTML頁面無關
無法通過DOM獲取繪制的圖形
無法為繪制的推行綁定DOM事件
3、 只能使用canvas提供的API
4、 如何使用canvas
1）在HTML頁面中定義<canvas>元素
默認寬度 300*150
效果上類似于div
問題：
定義canvas元素的寬度和高度
style設置-繪制圖形被拉伸
屬性方式 - 沒有任何問題
2）獲取<canvas>元素
3）獲取畫布對象
getContext("2d");
參數類型是string類型，參數必須是“2d”或“3d”(固定寫法)
4）使用Canvas提供的API
context.fileRect(10,10,100,100);
五、Canvas(畫布) - 高級內容
API提供的工具非常廣泛，包括創建圖形、顏色、文本等
-
矩形
1）繪制實心矩形 fillRect(x,y,width,heigth) 2）繪制空心矩形 strokeRect(x,y,width,heigth) 3）清除指定區域的像素，類似于橡皮擦 clearRect(x,y,width,height)
代碼展示：
<body>
<canvas width="500px" height="500px">
</canvas>
</body>
<script>
var canvas=document.getElementsByTagName('canvas')[0];
var context=canvas.getContext("2d");
context.strokeRect(50,50,400,400);
context.strokeRect(50,50,150,150);
context.strokeRect(300,50,150,150);
context.strokeRect(50,300,150,150);
context.strokeRect(300,300,150,150);
context.clearRect(50,50,150,150);
context.clearRect(49,49,150,150);
context.clearRect(301,49,150,150);
context.clearRect(49,301,150,150);
context.clearRect(301,301,150,150);
</script>
-
設置顏色 - 如果在創建圖像時，沒有指定顏色，那么所有圖形都會使用純黑色
1）聲明形狀線條的顏色
strokeStyle2）聲明形狀內部區域的顏色
fillStyle3）透明度屬性。可以設置畫布上圖形的透明度
globalAlpha
