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的东西,做了一些小案例,然后视频弹幕那个案例还是有难度的,跟着做了一遍然后下来自己再做一遍,熟悉怎么实现的,把今天学习到的一些东西都用进去。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1