h5py官网镜像 h5api官网

1、video

1.属性
        1.进度条controls
   

<video src="./音视频/1.mp4"  controls> </video>
         2.页面一加载是否自动播放autoplay
         <video src="./音视频/1.mp4"  controls autoplay> </video>         3.post封面
         <video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>         4.是否循环播放loop
         <video src="./音视频/1.mp4" controls loop> </video>         5.muted静音
         <video src="./音视频/1.mp4" controls loop autoplay> </video>2.方法
1.播放 play
  var video=$('video')[0];
  if($(this).text() === '播放'){
               video.play()
  }
2.暂停 pause
  if($(this).text()==='暂停'){
               video.pause()
   }
3.切换 paused 音视频是否是暂停状态
 if($(this).text()==='切换'){
                     if(video.paused){
                         video.play()
                     }else{
                         video.pause()
                     }
 }
4. // 控制音量+
    if($(this).text()==='音量+'){
       
        video.volume=(video.volume>0.9?0.9:video.volume )+0.1
    }
 5.if($(this).text()==='音量-'){
         video.volume=(video.volume<0.1?0.1:video.volume)-0.1
    }
6.// 快进
  if($(this).text()==='快进'){
         video.currentTime+=5
   }
7.// 回退
   if($(this).text()==='回退'){
       video.currentTime-=5
  }
8.// 倍数播放
  if($(this).text()==='倍速播放'){
    video.playbackRate=0.5
  } 3.事件
 video.onvolumechange=function(){
                 // console.log('音量改变事件监听')
                 if(this.volume>0.5){
                     alert('继续调高声音会损伤耳膜')
                 }
    }2.audio音频
audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.
 <!-- 不加controls相当于背景音乐 -->
 <audio src="./音视频/1.mp3" controls loop autoplay></audio>3、画布（canvas）
        1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形
         2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形
         3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法1.基本用法
 (1)获取canvas对象--获取画布
     通过document.getElementById()等方法取得canvas对象。
 (2)取得上下文(context)--获取画笔
     图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
 (3)定义填充样式
     context.fillStyle='red';
 (4)绘制填充图形
     context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高1.实例 --绘制填充矩形
 //通过fillRect
 window.οnlοad=function(){
             //1.获取画布
             var canvas=document.querySelector('canvas');
             // 2.获取画布上下文对象
             var context=canvas.getContext('2d');
             // 3.绘制填充样式
             context.fillStyle='red'
             // 4.绘制填充矩形
             context.fillRect(10,10,100,100)
 }
 //绘制轮廓矩形 边框矩形
 window.οnlοad=function(){
              //1.获取画布
             var canvas=document.querySelector('canvas');
             // 2.获取画布上下文对象
             var context=canvas.getContext('2d');
                // 设置轮廓样式
             context.strokeStyle='red'
             // 设置轮廓的线宽
             context.lineWidth=4;
             // 绘制边框矩形或者轮廓矩形
             context.strokeRect(10,10,100,100);
             // 清楚一部分区域
             context.clearRect(0,0,50,50);
             // 清楚全部区域
             context.clearRect(0,0,400,400)
 }2.实例 --绘制圆
 window.οnlοad=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取画布上下文对象
             var context=canvas.getContext('2d');
             // 绘制圆直线曲线需要路径 开始路径
             context.beginPath();
             // 圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
             // Math.PI --180度
             context.arc(100,100,50,0,Math.PI,true);
             // context.arc(100,100,50,0,Math.PI/2);
             // 直线路径
             context.lineTo(100,100);
             context.lineTo(150,100);
             context.arc(300,300,50,0,Math.PI*2);
             // 结束路径
             // context.closePath();
             // 填充样式
             context.fillStyle='red'
             // 绘制填充圆
             context.fill();
             // 绘制轮廓
             // context.stroke();}
3.实例 圆的移动
 window.οnlοad=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取画布上下文对象
             var context=canvas.getContext('2d');
             var bubble={
                 x:100,
                 y:100,
                 r:50,
                 color:'red'
             };
             draw(bubble);
             move(bubble)
             setInterval(function(){
                 // 清除画布
                 context.clearRect(0,0,600,600);
                 move(bubble)
             },200)
             // 绘制方法
             function draw(bubble){
                context.beginPath();
                context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
                context.fillStyle=bubble.color;
                context.fill()
             }
             // 移动
             function move(bubble){
                 bubble.x+=5;
                 bubble.y+=5;
                 draw(bubble);
             }
         }1.线性渐变 createLinearGradient
 window.οnlοad=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取画笔
             var context=canvas.getContext('2d');
             // 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置
             var g=context.createLinearGradient(0,0,400,400)
             // 添加渐变色
             g.addColorStop(0,'red')
             g.addColorStop(0.5,'cyan')
             g.addColorStop(1,'yellow');
             // 将渐变色给到填充样式
             context.fillStyle=g;
             context.fillRect(0,0,400,400);
         }2.径向渐变 createRadialGradient 同心圆渐变
  window.οnlοad=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取画笔
             var context=canvas.getContext('2d');
             // 声明一个渐变对象 前三个参数小圆心x轴开始位置 y轴开始位置 半径 后三个参数大圆心x轴开始位置 y轴开始位置 半径
             var g=context.createRadialGradient(200,200,50,200,200,200)
             // 添加渐变色
             g.addColorStop(0,'red')
             g.addColorStop(0.5,'cyan')
             g.addColorStop(1,'yellow');
             // 将渐变色给到填充样式
             context.fillStyle=g;
             context.fillRect(0,0,400,400)
    }4.绘制线段
 moveTo(x,y):
         x,y:线段的起点坐标
 lineTo(x,y)
         x,y:线段的终点坐标
 cx.stroke();
     //fill():不能使用
 lineWidth=number;// 绘制线段
     window.οnlοad=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取上下文
             var context=canvas.getContext('2d');
             // 绘制线段
             context.lineWidth=3
             context.beginPath();
             context.moveTo(0,0);
             context.lineTo(100,100);
             context.lineTo(200,10);
             context.lineTo(300,100);
             context.closePath();
             context.strokeStyle='red';
             context.stroke();}
5.绘制图像
  window.οnlοad=function(){
              // 获取画笔
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取上下文
             var context=canvas.getContext('2d');
             // 创建img节点    绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点
             var img=new Image();
             img.src='./2.jpg';
             img.οnlοad=function(){
                 // 绘制图片到画布中  从0,0点开始绘制图片，绘制一个200*200的图片
             context.drawImage(img,0,0,200,200);
             }
 }6. 绘制视频
 window.οnlοad=function(){
              // 获取画笔
             // 获取画布
             var canvas=document.querySelector('canvas');
             // 获取上下文
             var context=canvas.getContext('2d');
             var video=document.querySelector('video');
             draw()
                function draw(){
                context.drawImage(video,0,0,200,200);
                 // 请求动画帧
                requestAnimationFrame(draw)
                //告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定得回调函数更新动画
            }
 }7.绘制文本
 context.font = '28px blod';
 context.fillText('str', 100, 100);
 // context.strokeText('str', 100, 100);