本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
给大家剧透一下,今天下午4点会在QQ群:454796847进行web前端开发直播。欢迎大家莅临!
HTML5新特性之视频播放——video:
①例:<video src=""></video>
②video标签默认为300*150的inline-block;
③成员属性:
autoplay:是否自动播放;
controls:是否显示播放控件;
currentTime:当前播放到的时间;
duration:总时长;
defaultMuted:默认是否静音;
loop:是否自动循环播放;
muted:当前是否静音;
paused:当前是否处于暂停状态;
poster:"",在视频播放前的显示图片;
volumn:当前播放音量;
preload:预加载内容;取值:auto——自动预加载视频内容,并缓冲一段;metadata——仅预加载影片元素据(宽高时长);none——不预加载任何数据;
④成员方法:
play();——视频开始播放,paused属性变为false;
paused();——视频暂停,paused属性变为true;
⑤成员事件:
onplay:fn——当调用v.paly()方法时触发;
onpause:fn——当调用v.pause()方法时触发;
HTML5新特性之音频播放audio
①例:<audio src=""></audio>
②audio标签默认为300*30的inline-block,若不显示播放控件,则display为none;
③成员属性:
autoplay:是否自动播放;
controls:是否显示播放控件;
currentTime:当前播放到的时间;
duration:总时长;
defaultMuted:默认是否静音;
loop:是否自动循环播放;
muted:当前是否静音;
paused:当前是否处于暂停状态;
poster:"",在视频播放前的显示图片;
volumn:当前播放音量;
preload:预加载内容;取值:auto——自动预加载音频元素据内容,并缓冲一段;metadata——仅预加载音频元素据;none——不预加载任何音频数据;
④成员方法:
play();——音频开始播放,paused属性变为false;
paused();——音频暂停,paused属性变为true;
⑤成员事件:
onplay:fn——当调用v.paly()方法时触发;
onpause:fn——当调用v.pause()方法时触发;
⑥IOS系统自带Safari浏览器不支持audio标签,可使用隐藏的video代替;
HTML5新特性之Canvas绘图
①Canvas:画布,默认为300*150的inline-block,设定画布的宽高不能使用CSS Style,只能使用width和height属性;
②Canvas画布本身不能绘制内容,只用于承载被绘制的内容,画笔使用原生JS 创建:var ctx=canvas.getContext('2d');
③Context对象常用属性:
fillStyle:"#000000"——填充样式;
strokeStyle:"#000000"——描边/轮廓样式;
font:"10px sans-serif"——字体大小、类型
textAlign:"start"——文本对齐方式;
textBaseline:"alphabetic"——文本基线;
globalAlpha:——全局不透明度;
lineWidth:线/描边宽度;
shadowOffsetX:阴影在x轴的偏移量;
shadowOffsetY:阴影在y轴的偏移量;
shadowColor:"rgba(0,0,0,0)"——阴影颜色及透明度;
shadowBlur:阴影模糊半径;
④Context对象常用方法:
arc():绘制一个圆弧/圆形;
beginPath():开始绘制一条路径;
closePath():闭合一条路径;
fill():对路径进行填充;
stroke():对路径进行描边;
moveTo():移动到某一点;
lineTo():绘制到另一点的一条线段;
fillRect():填充一个矩形;
strokeRect():描边一个矩形;
clearRect():清空一个矩形范围内的所有内容;
fillText():填充一个字符串;
strokeText():描边一个字符串;
drawImage():绘制图像;
⑤创建一个线性渐变对象:
var g=ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(offset1,color1);
g.addColorStop(offset2,color2);
⑥绘制矩形(rectangle):定位点位于左上角
ctx.fillStyle="#000"/渐变对象;——填充样式;
ctx.strokeStyle="#000"/渐变对象;——描边样式;
ctx.lineWidth=;——描边宽度;
ctx.fillRect(x,y,w,h);——填充一个矩形;
ctx.strokeRect(x,y,w,h);——描边一个矩形;
ctx.clearRect(x,y,w,h);——清除一个矩形范围内的内容;
⑦绘制文本(text):文本定位点在整个字符串文本基线最左边
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;//测量文本宽度;
最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » HTML5的Video视频、Audio音频、Canvas的事件属性详解