HTML5_音视频

音频&视频

大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准
因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是
RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在

在介绍Html5中的音视频标签前，我们需要了解一些概念

1. 容器
	大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，
	它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip

	不管是音频文件或视频文件，实际上都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件
	视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。
	视频播放的时候，音频轨道和视频轨道是绑定在一起的。
	元数据包含了视频的封面、标题、子标题、字幕等相关信息。
	
	主流的视频文件格式(容器格式)					主流的音频文件格式
		MPEG-4:	     通常以.mp4为扩展名				MPEG-3  	.mp3
		Flash视频: 	 通常以.flv为扩展名				Acc音频    .acc
		Ogg:	    		 通常以.ogv为扩展名		Ogg音频	.ogg
		WebM:	    	 通常以.webm为扩展名
		音频视频交错: 通常以.avi为扩展名
						
2. 编解码器
	音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便
	音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是
	非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编
	码后的数据重组为原始的媒体数据
	
	      视频编解码器			   音频编解码器			 
			H.264			    			AAC
			VP8								MPEG-3
			Ogg Theora					Ogg Vorbis
		
		H.264： 别名 MPEG-4的第十部分,由MPEG研发并于2003年标准化
							  它的目的支持一切设备，无论是低带宽低cpu，还是高带宽高cpu 或者是两者之间。
							  要做到这一点，H.264标准被分成不同的几种配置。高配置使用了更多特性，
							  这会导致在解码过程中更加消耗CPU，但视频文件本身会更小，视频效果也更好 
							  
							苹果iphone手机		基本配置(BaseLine)
							正常的电视机支持        基本配置(BaseLine) 和 主配置(Main)两种
							正常的电脑支持  	        基本配置(BaseLine) 和 主配置(Main) 高级配置(high)三种
							   
		
	当然有一些编解码器受专利的保护，有一些则是免费的，例如Ogg的Vorbis音频编解码器。
	Ogg的Theora视频编解码器也是可以免费使用的。而想使用H.264的话就需要支付相关的费用了
	
	现在的视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的
	所有信息，而只是存储两帧之间的差异信息。
	编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以我们重点研究有损编解码器。
	有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀。
	
3.浏览器对于容器和编解码器支持的情况
	Browser						MP4(H.264 + AAC)	WebM(VP8 + Vorbis )		Ogg(Theora + Vorbis)
	Internet Explorer 9				YES						NO					NO
	Firefox 4.0						NO						YES					YES
	Google Chrome 					YES						YES					YES
	Apple Safari 5					YES						NO					NO
	Opera 10.6						NO						YES					YES
	
	http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/
	目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！
	
4.处理视频的一个流程
	1.制作一个Ogg容器中使用Theora视频和Vorbis音频的版本
	2.制作另外一个版本，使用WebM视频容器（VP8 + Vorbis）
	3.再制作一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频
	4.链接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器	
	
	
5. 格式转化
	用 FFmpeg 制作MP4 视频
		ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4
	
	用 FFmpeg 制作 WebM 视频
		ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm
	
	FFmpeg 制作 Ogg 视频
		ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv
	
	FFmpeg 制作Mp3音频
		ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3
		
	FFmpeg 制作Ogg音频
		ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
	
	FFmpeg 制作ACC音频	
		ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

H5中对音视频的设计

###html5标签
	

###http://s8.qhimg.com/share/audio/piano1/a4.mp3
###http://www.17sucai.com/preview/87827/2017-11-07/video1/video.mp4
###http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4

###自定义播放器主要参数
全局背景色：#383838
底部控制条：25px 高度
底部控制条背景色:#2A2A2A

主进度条的大小:宽度自适应,两边margin:55 230
	进度条的高度:3px 背景色:#737373
	进度条小方块尺寸:宽9 * 高7 ; 背景白色 ; 2px圆角


按钮排的大小:宽55 * 高25
	按钮大小:宽9 * 高11
	
	
右侧信息栏的大小:宽230 * 高25
	文字部分:宽120
		字体大小:12px
		颜色:white
		
	声音:宽80
		切换控件:宽20 高25
			子项:	margin: 7px auto;
					width: 12px;
					height: 12px;
					background: url(images/icon.png) no-repeat;
					background-position:0 -34px;
					
					active:background-position: 0 -46px;
		进度条:宽60 高25

	全屏:宽30
		  子项:display: inline-block;
			 margin: 7px auto;
			 width: 11px;
			 height: 11px;
			 background: url(images/icon.png) no-repeat;
			 background-position: 0 -58px;
			 
			 active:background-position: 0 -70px;

资源&参数

###class操作函数
	function addClass(node,className){
		var reg=new RegExp("\\b"+className+"\\b");
		if(!reg.test(node.className)){
			node.className +=(" "+className); 
		}
	}
	function removeClass(node,className){
		if(node.className){
			var reg=new RegExp("\\b"+className+"\\b");
			var classes = node.className;
			node.className=classes.replace(reg,"");
			if(/^\s*$/g.test(node.className)){
				node.removeAttribute("class");
			}
		}else{
			node.removeAttribute("class");
		}
	}


###全屏实现
	full.onclick=function() {
		if(isFullScreen) {
			isFullScreen = false
			if (document.exitFullscreen) {  
			    document.exitFullscreen();  
			}  
			else if (document.mozCancelFullScreen) {  
			    document.mozCancelFullScreen();  
			}  
			else if (document.webkitCancelFullScreen) {  
			    document.webkitCancelFullScreen();  
			}
			else if (document.msExitFullscreen) {
			      document.msExitFullscreen();
			}
		} else {
			isFullScreen = true
			var docElm = document.documentElement;
			//W3C  
			if (docElm.requestFullscreen) {  
			    docElm.requestFullscreen();  
			}
			//FireFox  
			else if (docElm.mozRequestFullScreen) {  
			    docElm.mozRequestFullScreen();  
			}
			//Chrome等  
			else if (docElm.webkitRequestFullScreen) {  
			    docElm.webkitRequestFullScreen();  
			}
			//IE11
			else if (docElm.msRequestFullscreen) {
			  docElm.msRequestFullscreen();
			}
		}
	}


###window10 下环境变量的入口
	控制面板-->选择大图标-->系统-->高级系统设置-->高级-->环境变量


###video写法
	

功能点逻辑

###功能点逻辑
	播放按钮点击时:
		切换播放按钮的样式
		控制视频的播放暂停
			播放:控制进度条的前进(通过开启定时器来实现)
			暂停:要关闭定时器不让进度条前进
			
	停止按钮点击时
		切换播放按钮的样式
		控制视频暂停
			暂停:要关闭定时器不让进度条前进
		进度条重置为0
		视频时间调整为0
		
	拖拽时根据拖拽距离控制视频时间
	
	点击进度条时,根据点击位置控制视频时间
		点击进度条时,默认就应该是播放操作
		切换播放按钮的样式
		控制视频的播放
			:控制进度条的前进:通过开启定时器来实现