html5基础学习

HTML5

新特性
1. 用于绘画的canvas元素和svg元素
2. 用于媒介回访的video元素和audio元素
3. 对本地离线存储的更好的支持
4. 新的特殊内容元素，比如：article、footer、header、nav、section
5. 新的表单控件，比如：range、date、time、email、url、search

视频（video）

视频的基本标签
controls 显示播放原生控件兼容性差
loop 循环播放，取值为布尔值
autoplay 自动播放视频（大多数浏览器禁用此功能），取值为布尔值，设置该属性后，需要与muted属性组合使用
muted 静音播放，取值为布尔值

poster 在播放视频之前显示广告，取值为广告的URL
缺点：如果暂停视频不能显示图片
preload 视频的预加载方式
none
不预加载任何数据，即不缓存视频，尽可能减少流量的浪费
metadata
只预加载视频时长、视频第一帧画面、视频宽高的信息
auto
浏览器会尽可能的下载视频文件，使其播放流畅，但是会造成网络流量的浪费（默认）
注意：设置该属性后，则视频在页面加载时进行加载，并预备播放。如果使用 " autoplay "，则忽略该属性

视频的兼容性写法

</video>
		<video width="800" height="">
      <source src="myvideo.mp4" type="video/mp4"></source>
      <source src="myvideo.ogv" type="video/ogg"></source>
      <source src="myvideo.webm" type="video/webm"></source>
       当前浏览器不支持 video直接播放，点击这里下载视频：<a href="myvideo.webm">下载视频</a>
</video>

注意：浏览器器将使用第一个可识别的视频格式

使用dom来操作视频

<script type="text/javascript">
			let vdo=document.getElementById('vdo')
			// 取消原生的控件
			vdo.controls=false;
			// 用于获取/设置媒体对象是否自动播放
			vdo.autoplay=true
			// 用于获取/设置媒体对象在播放时是否静音
			vdo.muted=true
			// 用于获取/设置媒体对象是否循环播放
			vdo.loop=true
			// 用于获取/设置媒体文件的URL地址
			vdo.src=“myvideo.mp4”
			// 用于获取/设置媒体的音量（取值范围来[0,1]）
			vdo.volume=0.3
			// 用于获取/设置媒体的播放速率，如果其值为1.0，为正常速率
			vdo.playbackRate=1.5
			// 用于获取媒体对象是否在暂停，返回值为布尔值
			console.log(vdo.paused)
			// 用于获取媒体对象是否播放完毕
			console.log(vdo.ended)
			// 用于获取/设置媒体对象的当前播放时间（单位为秒）
			console.log(vdo.currentTime)
			vdo.currentTime=20	
			// 用于获取媒体对象的总时长（单位为秒）
			console.log(vdo.duration)
			// 通过自定义按钮来实现视频的播放和 暂停
			// 首先有两个按钮 play  pause
			play.onclick=function(){
				vdo.play();
			}
			pause.onclick=function(){
				vdo.pause();
			}
			// 如果要改为一个按钮，要搭配一个属性，判断视频是否在暂停。
			play.onclick=function(){
				if(vdo.paused){
					vdo.play();
				}else{
					vdo.pause();
				}
			}
		</script>

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

object-fit
css的属性，一般用于img和video属性

fill  	填充，默认值，不保证保持原有的比例，将视频拉伸操作填满父元素
contain
	包含，保持原有视频比例，内容被缩放，父元素可能有空白区域
cover
	覆盖，保持原有视频比例，宽度和高度至少有一个与父元素一致（裁剪）
none
	保留原有元素内容的长度和宽度，也就是说内容不会被重置
scale-down
	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些
实例

<div class="box">
     <video src="res/mm.png"></video>
</div>
		.box{
    object-fit:fill;
    width:500px;
    height:300px;
}

音频（audio）

使用方法和视频一样

全屏模式

// 全屏模式(兼容写法)
			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();
			       }
			}
			// 使用全屏模式
			btn.onclick=function(){
				requestFullScreen(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();
			     }
			}

全屏事件和属性

// 判断当前浏览器是否允许设置全屏状态
				document.fullScreenEnabled
			// 获取全屏显示的网页元素
				document.fullscreenElement
			// 启动全屏或退出全屏时触发
				fullscreenchange
			document.addEventListener('fullscreenchange', function(){ /*code*/ });
			document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
			document.addEventListener('mozfullscreenchange', function(){ /*code*/});
			document.addEventListener('MSFullscreenChange', function(){ /*code*/});
			// 启动全屏或退出全屏失败时触发
				fullscreenerror
			document.addEventListener('fullscreenerror', function(){ /*code*/ });
			document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
			document.addEventListener('mozfullscreenerror', function(){ /*code*/);
			document.addEventListener('MSFullscreenError', function(){ /*code*/ });
			// 注意：fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理
			// 1. 跨浏览器返回正处于全屏的元素
				function fullscreenElement(){
			    var fse = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
			    //注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
			    console.log("全屏元素："+fse);
			    return fse;
			}
			// 2. 跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
				function fullscreenEnable(){
			     var isFullscreen = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
			     //注意：要在用户授权全屏后才能准确获取当前的状态
			     if(isFullscreen){
			          console.log('全屏模式');
			     }else{
			           console.log('非全屏模式');
			     }
			}

绘图

canvas
canvas 通过 JavaScript 来绘制 2D 图形。canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何已经被图形覆盖的对象
canvas的特点
1. 依赖屏幕分辨率
2. 不支持事件处理器
3. 弱的文本渲染能力
4. 能够以 .png 或 .jpg 格式保存结果图像
5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
6. 颜色非常细腻
7. 不可以放大或缩小

svg
svg 是一种使用 XML 描述 2D 图形的语言。svg 基于 XML，这意味着 svg DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形

svg的特点
1. 矢量可以无限放大和缩小，并且不失真
2. 颜色不够丰富
3. 不依赖分辨率
4. 支持事件处理器
5. 最适合带有大型渲染区域的应用程序，比如：谷歌地图
6. 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
7. 不适合游戏应用

智能定时器

优点

该方法充利用显示器的刷新频率，不会出现卡顿、丢帧的现象
注意：普通笔记本为60Hz
动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动
函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销

如果当前选项卡没有被激话的话，动画将自动停止，以节省计算机资源
CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销

语法：window.requestAnimationFrame(callback)
	一次性定时器
		function fn(){...}；
requestAnimationFrame(fn);
	周期性定时器
		function fn(){
     requestAnimationFrame(fn);
}
停止定时器
	window.cancelAnimationFrame(requestId)
		cancelAnimationFrame()方法用于清理由requestAnimationFrame()方法返回的requestId