HTML5的Video视频、Audio音频、Canvas的事件属性详解

HTML5 herman 1289浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

给大家剧透一下,今天下午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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5的Video视频、Audio音频、Canvas的事件属性详解