2020109王杉

学习内容：

• HTML5视频：
  1. 视频支持格式：.ovg/.mp4/.webm
  2. 视频简洁语法：

     <video src="" width="" height=""></video>

  3. 视频标签：

     ①controls 原生控件显示其他操作功能②loop循环播放-布尔值③autoplay自动播放-布尔值④muted静音播放-布尔值⑤poster播放视频前显示广告(缺点暂停视频无法显示图片)⑥preload视频加载方式：none metadata auto(默认)

  4. 使用DOM操作视频注意：

     ①注意：获取视频元素的width属性和height属性时，必须保证video元素中存在width和height，否则获取的值为0

     ②注意：如果要获取视频对象的原始宽度和高度必须在loadeddata事件完成后才能使用

• HTML5音频：
  1. 音频支持格式：.mp3/.wav/.ogg
  2. 音频简洁语法： <audio src=""></audio>
  3. 音频标签：大多与视频差不多功能①volume用于获取/设置媒体音量（0,1]

     ②playbackRate播放速率按倍数③currentTime用于获取/设置媒体当前播放时间③duration用于获取媒体对象的总时长

• 全屏模式：
  1. 进入全屏模式：

     function requestFullScreen(element) {
     if(element.requestFullscreen) {
     element.requestFullscreen();
     } else if(element.mozRequestFullScreen) {
     element.mozRequestFullScreen();
     } else if(element.webkitRequestFullscreen) {
     element.webkitRequestFullscreen();
     } else if(element.msRequestFullscreen) {
     element.msRequestFullscreen();
     }
     }

     启动全屏模式：

     整个页面

     requestFullScreen(document.documentElement);

     某个元素

     requestFullScreen(document.getElementById(“vde”));

  2. 退出全屏模式：

     function exitFullScreen() {
     if(document.exitFullscreen) {
     document.exitFullscreen();
     } else if(document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
     } else if(document.webkitExitFullscreen) {
     document.webkitExitFullscreen();
     } else if(document.msExitFullscreen){
     document.msExitFullscreen();
     }
     }

     退出全屏模式：exitFullscreen();

• HTML5绘图：
  1. 三种绘图技术：

     Canvas Svg webGL 3D

  2. Canvas绘图步骤：
     • 标签创建画布：<canvas width=:"" height=""></canvas>
     • js获取画布：获取id绑定 var cvs=document.elementById("cvs")
     • 获取画布画笔对象：

     var ctx=cvs.getContext("2d")

     • 绘制图形/绘制文本：

     矩形

     ctx.strokeRect(x,ywidth,height)空心

     ctx.fillRect(x,ywidth,height)实心

     文本

     ctx.strokeText(text,x,y)空心

     ctx.fillText(text,x,y)实心

     • 清除矩形所有元素

     cctx.clearRect(x,y.width,height)x,y清零

     • 注意：所有的样式设置必须设置在绘制图形之前，否则不生效
     • 路径：
     1. 第一步：通过ctx.beginPath()方法开始新的路径
     2. 第二步：通过ctx.moveTo()方法指定路径的起点坐标
     3. 第三步：绘制基本路径内容（如：lineTo()方法用于绘制线段等）
     4. 第四步：通过stroke()或fill()方法完成路径的绘制
• 智能定时器：

  window.requestAnimationFrame(callback)

  停止定时器：window.cancelAnimationFrame(requestId)

  cancelAnimationFrame()方法用于清理由requestAnimationFrame()方法返回的requestId

心得：

​ 今天讲了HTML5的东西，做了一些小案例，然后视频弹幕那个案例还是有难度的，跟着做了一遍然后下来自己再做一遍，熟悉怎么实现的，把今天学习到的一些东西都用进去。