HTML5新增语法

1.video

1、简化版写法：兼容性差

2、视频标签标准语法（兼容处理）

 ``
//浏览器将使用第一个可识别的视频

3、视频标签属性

• width 宽度
• height 高度

以下取值为布尔值：

• controls 显示播放原生控件（兼容性极差）
• loop 循环播放
• autoplay 自动播放视屏（大多数浏览器禁用此功能）
• muted 静音播放
• poster 在视频播放之前显示广告，取值为广告的url（缺点：如果暂停视频不能显示广告图片）
• preload 视频的预加载方式默认auto（注意：设置该属性后，则视频在页面加载时进行加载，并预备播放。如果使用 " autoplay "，则忽略该属性）

4、使用DOM操作视频

HTMLVideoElement属性

//1. 获取视频对象
var vdo = document.getElmentById("video")
//2. 获取/设置对象的宽度/高度（如果本身没有设置 就是0）
vdo.width
vdo.height
//3. 获取视频对象的原始宽度、高度
vdo.videoWidth
vdo.videoHeight
//注意：如果要获取视频对象的原始宽度和高度必须在loadeddata事件完成后才能使用
vdo.addEventListener("loadeddata",()=>{
     console.log(vde.videoWidth)             
     console.log(vde.videoHeight)
})
//loadeddata 事件表示已经加载完成视频的第一帧，当加载完视频的第一帧以后，视频的原始宽度和高度才能正常访问
//4. 获取视频海报帧
vdo.poster = 'myvideo.mp4'

HTMLMediaElement属性

2.audio

1、音频标签标准语法

2、音频标签属性

3、HTMLAudioElement
构造函数：var ado = new Audio([音频文件的URL地址])
==> 1. var ado=new Audio("./myaudio.mp3");2.ado.controls=true;3.document.body.appendChild(ado)

4.HTMLMediaElement

3. 全屏模式（兼容性讨厌）

1、全屏模式兼容写法

2、全屏属性和事件

4.canvas

1、通过标签创建画布

2、通过js程序获取画布画笔

3、CanvasRenderingContext2D对象

1.绘制图形

2.绘制文本

3.清空矩形范围内所有元素

4.路径