1、HTML5新特性之視頻播放——video：
?①例：<video src=""></video>
?②video標(biāo)簽?zāi)J(rèn)為300*150的inline-block；
?③成員屬性：
??autoplay：是否自動(dòng)播放；
??controls：是否顯示播放控件；
??currentTime：當(dāng)前播放到的時(shí)間；
??duration：總時(shí)長(zhǎng)；
??defaultMuted：默認(rèn)是否靜音；
??loop：是否自動(dòng)循環(huán)播放；
??muted：當(dāng)前是否靜音；
??paused：當(dāng)前是否處于暫停狀態(tài)；
??poster：""，在視頻播放前的顯示圖片；
??volumn：當(dāng)前播放音量；
??preload：預(yù)加載內(nèi)容；取值：auto——自動(dòng)預(yù)加載視頻內(nèi)容，并緩沖一段；metadata——僅預(yù)加載影片元素?fù)?jù)（寬高時(shí)長(zhǎng)）；none——不預(yù)加載任何數(shù)據(jù)；
?④成員方法：
??play();——視頻開始播放，paused屬性變?yōu)閒alse；
??paused();——視頻暫停，paused屬性變?yōu)閠rue；
?⑤成員事件：
??onplay:fn——當(dāng)調(diào)用v.paly()方法時(shí)觸發(fā)；
??onpause:fn——當(dāng)調(diào)用v.pause()方法時(shí)觸發(fā)；
2、HTML5新特性之音頻播放——audio：
?①例：<audio src=""></audio>
?②audio標(biāo)簽?zāi)J(rèn)為300*30的inline-block，若不顯示播放控件，則display為none；
?③成員屬性：
??autoplay：是否自動(dòng)播放；
??controls：是否顯示播放控件；
??currentTime：當(dāng)前播放到的時(shí)間；
??duration：總時(shí)長(zhǎng)；
??defaultMuted：默認(rèn)是否靜音；
??loop：是否自動(dòng)循環(huán)播放；
??muted：當(dāng)前是否靜音；
??paused：當(dāng)前是否處于暫停狀態(tài)；
??poster：""，在視頻播放前的顯示圖片；
??volumn：當(dāng)前播放音量；
??preload：預(yù)加載內(nèi)容；取值：auto——自動(dòng)預(yù)加載音頻元素?fù)?jù)內(nèi)容，并緩沖一段；metadata——僅預(yù)加載音頻元素?fù)?jù)；none——不預(yù)加載任何音頻數(shù)據(jù)；
?④成員方法：
??play();——音頻開始播放，paused屬性變?yōu)閒alse；
??paused();——音頻暫停，paused屬性變?yōu)閠rue；
?⑤成員事件：
??onplay:fn——當(dāng)調(diào)用v.paly()方法時(shí)觸發(fā)；
??onpause:fn——當(dāng)調(diào)用v.pause()方法時(shí)觸發(fā)；
?⑥IOS系統(tǒng)自帶Safari瀏覽器不支持audio標(biāo)簽，可使用隱藏的video代替；
3、HTML5新特性之Canvas繪圖：
?①Canvas：畫布，默認(rèn)為300*150的inline-block，設(shè)定畫布的寬高不能使用CSS Style，只能使用width和height屬性；
?②Canvas畫布本身不能繪制內(nèi)容，只用于承載被繪制的內(nèi)容，畫筆使用原生JS 創(chuàng)建：var ctx=canvas.getContext('2d');
?③Context對(duì)象常用屬性：
??fillStyle:"#000000"——填充樣式；
??strokeStyle:"#000000"——描邊/輪廓樣式；
??font:"10px sans-serif"——字體大小、類型
??textAlign:"start"——文本對(duì)齊方式；
??textBaseline:"alphabetic"——文本基線；
??globalAlpha：——全局不透明度；
??lineWidth：線/描邊寬度；
??shadowOffsetX：陰影在x軸的偏移量；
??shadowOffsetY：陰影在y軸的偏移量；
??shadowColor:"rgba(0,0,0,0)"——陰影顏色及透明度；
??shadowBlur：陰影模糊半徑；
?④Context對(duì)象常用方法：
??arc()：繪制一個(gè)圓弧/圓形；
??beginPath()：開始繪制一條路徑；
??closePath()：閉合一條路徑；
??fill()：對(duì)路徑進(jìn)行填充；
??stroke()：對(duì)路徑進(jìn)行描邊；
??moveTo()：移動(dòng)到某一點(diǎn)；
??lineTo()：繪制到另一點(diǎn)的一條線段；
??fillRect()：填充一個(gè)矩形；
??strokeRect()：描邊一個(gè)矩形；
??clearRect()：清空一個(gè)矩形范圍內(nèi)的所有內(nèi)容；
??fillText()：填充一個(gè)字符串；
??strokeText()：描邊一個(gè)字符串；
??drawImage()：繪制圖像；
?⑤創(chuàng)建一個(gè)線性漸變對(duì)象：
??var g=ctx.createLinearGradient(x1,y1,x2,y2);
??g.addColorStop(offset1,color1);
??g.addColorStop(offset2,color2);
?⑥繪制矩形（rectangle）：定位點(diǎn)位于左上角
??ctx.fillStyle="#000"/漸變對(duì)象;——填充樣式；
??ctx.strokeStyle="#000"/漸變對(duì)象;——描邊樣式；
??ctx.lineWidth=;——描邊寬度；
??ctx.fillRect(x,y,w,h);——填充一個(gè)矩形；
??ctx.strokeRect(x,y,w,h);——描邊一個(gè)矩形；
??ctx.clearRect(x,y,w,h);——清除一個(gè)矩形范圍內(nèi)的內(nèi)容；
?⑦繪制文本（text）：文本定位點(diǎn)在整個(gè)字符串文本基線最左邊
??ctx.textBaseline="alphabetic";//文本基線，可取值為：top/middle/alphabetic/bottom；
??ctx.font="10px sans-serif";
??ctx.fillText(txt,x,y);
??ctx.strokeText(txt,x,y);
??ctx.measureText(txt).width;//測(cè)量文本寬度；

轉(zhuǎn)載于:https://www.cnblogs.com/Jupiter258/p/6058121.html

總結(jié)

以上是生活随笔為你收集整理的HTML5_02之视频、音频、Canvas的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。