關(guān)鍵詞：視頻處理找默、音頻處理铃剔、Canvas(畫(huà)布)
一膝迎、視頻處理
1、基本內(nèi)容
1.1漆撞、使用HTML實(shí)現(xiàn)視頻處理：
-
video標(biāo)簽
如果當(dāng)前瀏覽器不支持video，可以在veido里面編寫(xiě)提示內(nèi) src - 引入視頻文件的路徑 autoplay - 自動(dòng)播放視頻
2）souce元素
<video>
<source src="一種視頻格式"/>
<source src="一種視頻格式"/>
<source src="一種視頻格式"/>
</video>
1.2于宙、video支持的視頻格式
MP4 - 目前比較主流
OGG - 多用于移動(dòng)端
WebM - 目前唯一支持超高清格式
1.3浮驳、video元素的屬性
src - 視頻路徑
autoplay - 自動(dòng)播放
controls屬性 - 提供視頻播放的控制面板，只有屬性名捞魁，沒(méi)有屬性值
loop - 視頻的循環(huán)播放
poster屬性 - 在視頻播放之前至会，顯示一張圖片
width/height - 設(shè)置顯示視頻的寬度和高度
preload - 預(yù)加載：
auto-(默認(rèn)值)自動(dòng)加載
none-不加載
metadata-只加載視頻的基本信息(不含視頻)
2、高級(jí)內(nèi)容
2.1谱俭、 方法
play() - 播放視頻
pause() - 暫停視頻
load() - 重新加載音頻/視頻元素
canPlayType() - 判斷當(dāng)前瀏覽器是否支持指定視頻格式
2.2奉件、 事件
onplay - 當(dāng)視頻開(kāi)始播放時(shí)調(diào)用
onpause - 當(dāng)視頻開(kāi)始
onended - 當(dāng)視頻結(jié)束時(shí)被觸發(fā)
onerror - 當(dāng)視頻錯(cuò)誤時(shí)被觸發(fā)
oncanplay - 當(dāng)整個(gè)媒體可以順利播放時(shí)，就會(huì)觸發(fā)這個(gè)事件
oncanplaythrough - 不考慮整體狀態(tài)昆著，只要下載了一定的可放幀會(huì)會(huì)觸發(fā)這個(gè)事件
onprogress - 用于更新媒體的下載進(jìn)度县貌，會(huì)周期性的觸發(fā)
2.3、 屬性
paused - 表示判斷當(dāng)前是否暫停凑懂，true表示暫停
ended - 表示判斷當(dāng)前視頻是否播放完畢煤痕，true表示播放完畢
duration - 表示當(dāng)前視頻的時(shí)長(zhǎng),單位為s
currentTime - 表示當(dāng)前視頻播放的位置
2.4、 video元素
當(dāng)video視頻全屏?xí)r接谨，瀏覽器會(huì)把video放到最前端摆碉，圖片是有顯示的，但被視頻覆蓋了
利用video事件完成廣告效果
bug: 不能全屏
解決方案：
等到HTML5更新
使用video元素提供的高級(jí)編程自己實(shí)現(xiàn)
使用目前封裝好的video的JS庫(kù) video.js
3脓豪、代碼示例
<body>
<video controls poster="gg.jpg" width="300px" height="400px" style="background:black" preload="auto">
您的瀏覽器不支持播放該格式視頻
<source src="video.mp4">
<source src="video.ogg">
<source src="video.webm">
</video>
<button id="btn"></button>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
var video = document.getElementsByTagName('video')[0];
//paused當(dāng)前視頻是否暫停巷帝，暫停返回true
if (video.paused) {
video.play();
btn.innerHTML = "暫停";
}else{
video.pause();
btn.innerHTML = "播放";
}
video.onplay = function(){
console.log("====");
}
video.onended = function(){
console.log("++++");
}
}
</script>
4、運(yùn)行結(jié)果
二扫夜、音頻處理
1楞泼、 audio元素
第一種：只支持一種音頻格式
<audio src="音頻文件路徑"></audio>
第二種： 同時(shí)引入多個(gè)音頻格式
<audio>
<source src="一種音頻格式">
<source src="一種音頻格式">
<source src="一種音頻格式">
</audio>
2、audio元素支持的音頻格式
MP3 - 目前最主流
OGG
WAV
3笤闯、代碼示例
<body>
<audio src="audio.mp3" autoplay loop controls></audio>
</body>
三现拒、Canvas(畫(huà)布)
1、基本內(nèi)容
1.1望侈、 HTML5提供的新元素
1.2、 Canvas在HTML頁(yè)面提供畫(huà)布的功能
可以在頁(yè)面中繪制各種圖形
1.3勋桶、 canvas繪制的圖形與HTML頁(yè)面無(wú)關(guān)
無(wú)法通過(guò)DOM獲取繪制的圖形
無(wú)法為繪制的推行綁定DOM事件
1.4脱衙、 只能使用canvas提供的API
1.5侥猬、 主要用途
在HTML頁(yè)面中繪制圖標(biāo)(例如柱狀圖、餅狀圖等)
網(wǎng)頁(yè)游戲 - Flash技術(shù)
使用HTML5中的canvas
1.6. 如何使用canvas
1）在HTML頁(yè)面中定義<canvas>元素
默認(rèn)寬度 300*150
效果上類似于div
問(wèn)題：
定義canvas元素的寬度和高度
style設(shè)置-繪制圖形被拉伸
屬性方式 - 沒(méi)有任何問(wèn)題
2）獲取<canvas>元素
3）獲取畫(huà)布對(duì)象
getContext("2d");
參數(shù)類型是string類型捐韩，參數(shù)必須是“2d”或“3d”(固定寫(xiě)法)
4）使用Canvas提供的API
context.fileRect(10,10,100,100);
2退唠、高級(jí)內(nèi)容
1、API提供的工具非常廣泛荤胁，包括創(chuàng)建圖形瞧预、顏色、文本等
2仅政、矩形
1）繪制實(shí)心矩形
fillRect(x,y,width,heigth)
2）繪制空心矩形
strokeRect(x,y,width,heigth)
3）清除指定區(qū)域的像素垢油，類似于橡皮擦
clearRect(x,y,width,height)
3.、設(shè)置顏色 - 如果在創(chuàng)建圖像時(shí)圆丹，沒(méi)有指定顏色滩愁，那么所有圖形都會(huì)使用純黑色
1）聲明形狀線條的顏色
strokeStyle
2）聲明形狀內(nèi)部區(qū)域的顏色
fillStyle
3）透明度屬性”璺猓可以設(shè)置畫(huà)布上圖形的透明度
globalAlpha
HTML5的難度
HTML5的核心API相對(duì)來(lái)講硝枉，都不難
HTML5的案例真正難在邏輯(js代碼)
總結(jié)：HTML5離不開(kāi)js
第二階段js，抓緊復(fù)習(xí)
個(gè)人不建議 - 留級(jí)
4倦微、 漸變效果 - canvas支持的漸變效果包括線性漸變或射線漸變妻味，并且支持顏色轉(zhuǎn)折點(diǎn)
1）在畫(huà)布上創(chuàng)建一個(gè)漸變對(duì)象
var grd = context.createLinearGradient(x1,y1,x2,y2)
x1,y1 - 基準(zhǔn)線的起點(diǎn)坐標(biāo)值
x2,y2 - 基準(zhǔn)線的終點(diǎn)坐標(biāo)值
var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)
x1,y1 - 第一個(gè)基準(zhǔn)圓的元素坐標(biāo)值
r1 - 第一個(gè)基準(zhǔn)圓的半徑
x2,y2,r2同上
返回一個(gè)漸變對(duì)象
2）給漸變對(duì)象指定漸變顏色值
addColorStop(position,color)
position - 指設(shè)置漸變顏色的位置(0-1)
3） 將漸變對(duì)象作為畫(huà)布對(duì)象的顏色
context.fillStyle = grd;
4） 繪制矩形
context.fillRect(0,0,400,400);
5、代碼示例
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext("2d");
function myCanvas() {
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
var x = Math.random()*WIDTH;
var y = Math.random()*HEIGHT;
var width = Math.random()*WIDTH;
var height = Math.random()*HEIGHT;
//讓圖形生成在canvas里
if((x+width)>=WIDTH){
//重新生成
x = Math.random()*WIDTH;
width = Math.random()*WIDTH;
}
if((y+height)>=height){
y = Math.random()*height;
height = Math.random()*height;
}
context.strokeStyle = "rgb("+r+","+g+","+b+")";
context.strokeRect(x,y,width,height);
}
setInterval(myCanvas,1000);
</script>
6欣福、運(yùn)行結(jié)果
