HTML5新增语法

html5新增语法

1.video

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

<video src="" controls> </video>

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

 `<video>
    <source src="视频文件URL地址" />
    <source src="视频文件URL地址" />
    <source src="视频文件URL地址" />
     浏览器不支持视频的提示文本
</video>`
//浏览器将使用第一个可识别的视频

3. 视频标签属性

   1. width 宽度
   2. height 高度

   以下取值为布尔值：

   1. controls 显示播放原生控件（兼容性极差）
   2. loop 循环播放
   3. autoplay 自动播放视屏（大多数浏览器禁用此功能）
   4. muted 静音播放
   5. poster 在视频播放之前显示广告，取值为广告的url（缺点：如果暂停视频不能显示广告图片）
   6. 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属性

<script>
//autoplay  是否自动播放
//muted  是否静音
//controls  是否显示播放控件
//loop 是否循环播放
//src  用于设置媒体文件的url地址
//volume  用于获取、设置媒体的音量（取值范围[0,1]）
vdo.volume = 0.6
//playbackRate  获取、设置媒体的播放速率，1.0为正常速率
//paused  用于获取媒体对象是否在暂停，返回值为布尔值
//ended  用于获取媒体对象是否播放完毕
//currentTime  用于获取、设置媒体对象的当前播放时间（单位为秒）
//duration  用于获取媒体对象的总时长（单位s）


//方法play()  用于实现媒体的播放
vdo.play()
//方法pause()  用于实现媒体的暂停
veo.pause()

var play = document.getElementById("play")
play.onclick = ()=>{
	//判断视频是否为暂停
	if(vdo.paused==false){
		vdo.pause();
	}else{
		vdo.play();
	}
}


//事件
//媒体对象播放时触发
vdo.addEventListener("play",()=>{})
//媒体对象暂停时触发
vdo.addEventListener("pause",()=>{})
//媒体对象播放完毕后触发
vdo.addEventListener("ended",()=>{})
//媒体文件的第一帧加载完成后被触发
vdo.addEventListener("loadeddata",()=>{})
//媒体对象的currentTime属性发生变化时调用
vdo.addEventListener("timeupdata",()=>{})
//媒体对象加载结束时触发
vdo.addEventListener("canplaythrough",()=>{})

</script>

2.audio

1. 音频标签标准语法

<audio>
      <source src="音频文件URL"/>
      <source src="音频文件URL"/>
      <source src="音频文件URL"/>
      浏览器不支持音频的提示文本
</audio>

2. 音频标签属性

<script>
	//controls
	//autoplay
	//muted
	//loop
	//preload
	//和视频是一样的
</script>

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. 全屏模式兼容写法

<script>
//进入全屏模式兼容写法
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("vdo"));



//退出全屏模式兼容性写法
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();
p1.onclick = ()=>{exitFullscreen()}
</script>

2. 全屏属性和事件

<script>
	//判断当前浏览器是否允许设置全屏状态
	document.fullScreenEnabled
	//获取全屏显示的网页元素
	document.fullscreenElement
	//启动全屏或退出全屏时触发
	fullscreenchange//有兼容性
	//启动全屏或退出全屏失败时触发
	fullscreenerror//有兼容性
</script>

4.canvas

1. 通过标签创建画布

<canvas id="canvas" height:"800"; width:"800"></canvas>

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

<script>
	var cvs = document.getElementById("canvas")
	var ctx = cvs.getContext(2D)
</script>

3. CanvasRenderingContext2D对象

   1. 绘制图形

<script>
	//1. 绘制空心矩形（描边矩形）
	ctx.strokeRect(x,y,width,height)
	//2. 绘制实心矩形（填充矩形）
	ctx.fillRect(x,y,width,height)
	
	//所有画笔样式要在绘制之前写才会生效！！！！！！！！！
	
	//3. 获取/设置描边矩形颜色
	//获取：
	ctx.strokeStyle
	//设置：
	ctx.strokeStyle="#f00"
	//4. 获取/设置填充矩形颜色
	//获取：
	ctx.fillStyle
	//设置：
	ctx.fillStyle="#f00"
	//5. 获取/设置画笔透明度
	//获取：
	ctx.globalAlpha
	//设置：(取值0-1)
	ctx.globalAlpha=0.4
</script>

2. 绘制文本

<script>
	//1. 绘制描边文本
	ctx.strokeText(text,x,y)
	//2. 绘制填充(实体)文本
	ctx.fillText(text,x,y)
	//3. 获取/设置文本样式
	//设置：
	ctx.font="字号 字体";
	//获取：
	ctx.font
	//4. 获取/设置文本的水平对齐方式
	//设置：
	ctx.textAlign="center";
	//获取：
	ctx.textAlign
	//5. 获取/设置文本的垂直对齐方式（基线位置）
	//设置：
	ctx.textBaseline="top"
	//alphabetic  默认，文本基线是普通的字母基线
	//top  文本基线是em方框的顶端
	//middle 文本基线是em方框的正中
	//ideographic 文本基线是表意基线
	//bottom 文本基线是em方框的底部
	//hanging 文本基线是悬挂基线
	//获取：
	ctx.textBaseline
	
	//返回包含指定文本宽度的对象
	ctx.measureText(text).width;
	//text：要测量的文本
</script>

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

<script>
	ctx.clearRect(x,y,width,height)
	//一般都是清除整个画布，重绘画布
</script>

4. 路径

<script>
	//绘制路径写起点和终点
	ctx.moveTO(x,y)
	ctx.lineTo(x,y)
	ctx.stroke()//绘制已定义路径
	ctx.strokeStyle="color"  绘制路径颜色
	ctx.fill()//填充已有路径
	ctx.fillStyle="color" //填充颜色
</script>

5. 实例 弹幕

//看下一篇文章