h5学习笔记之视频与音频

一、视频
1、Video标签的各属性说明
Autoplay 视频就绪自动播放 在火狐和谷歌浏览器中需要加上 muted 属性一起使用才可以
controls 向用户显示播放控件
Width 设置播放器宽度
Height 设置播放器高度
Loop 播放完是否继续播放该视频，循环播放
Preload 是否等加载完再播放
Src 视频url地址
Poster 加载等待的画面图片
Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效
效果如下：
1、Autoplay 视频就绪自动播放 在火狐和谷歌浏览器中需要加上 muted 属性一起使用才可以

               <video src="潭州教育.mp4" Autoplay  muted controls poster="1.jpg" width="500" height="500">
					您的浏览器不支持video标签，请您更换浏览器！
	          </video>
			2、controls	向用户显示播放控件
			![在这里插入图片描述](https://img-blog.csdnimg.cn/20190908144221516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzczNDE2,size_16,color_FFFFFF,t_70)
			3、Poster		加载等待的画面图片‘
			
	 				<video src="潭州教育.mp4"   controls poster="1.jpg" width="500" height="500">
							您的浏览器不支持video标签，请您更换浏览器！
					</video>
			![在这里插入图片描述](https://img-blog.csdnimg.cn/20190908144351957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzczNDE2,size_16,color_FFFFFF,t_70)

2、Video API方法
play() 播放
pause() 暂停
load() 重新加载
全屏: webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen();
退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
全屏的案例

			oBox.onclick = function(){
				vid.webkitRequestFullScreen();
			}

播放暂停的案例

	<video poster="1.jpg" width="500" height="500" id="vid"> 
		<source src="1.mp4" type="video/mp4"></source>
		<source src="1.ogg" type="video/mp4"></source>
  </video>
		<input type="button" value="播放" id="btn1">
		 var vid = document.getElementById('vid');
		 var btn1 = document.getElementById('btn1')
		 var mark =true;
		 btn1.onclick = function(){
			if ( mark){
				btn1.value = "暂停"；
				mark =false;
				vid.play();
			}	else
			{
				btn1.value = "播放"；
				mark='true';
				vid.pause();
			} 
	}		

2、下一集 按钮的案例

	   var vid = document.getElementById("vid");
		var btn1 =  document.getElementById("btn1");
		var sou = document.getElementsByTagName("source");
			btn1.onclick = function(){
				sou[0].src = "1.mp4";
				sou[1].src = "1.ogg";
				sou[1].src = "1.wmv";
				vid.load();              //改变地址后，值用重新加载这个方法就可以了
			}

3、
Video API属性
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 false /true
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)

下面以一个制作一个视频播放器为案例，
1、来展现出播放器中时间的改变

				<video src="1.mp4" Autoplay muted poster="1.jpg" width="500" height="500" id="vid">		
				您的浏览器不支持video标签，请您更换浏览器！
				</video></br>
				<input type="button" value="播放">
				<input type="button" value="00:00:00" width="70px">   //这里是展现时间的改变
				<div id="div1">
					<div id="div2"></div>
					<div id="div3"></div>
				</div>
				<input type="button" value="00:00:00">                         //这里是展示总的时长
				
				function nowTime(){                                         //获取当前时间 并在input里显示
				input[1].value = time(vid.currentTime);          //这里用到了属性  currentTime  表示当前时间
			}
		
			function time(cTime){                                     //这里是把获取到的数据进行处理
				cTime = parseInt(cTime);
				var h = zero(Math.floor(cTime/3600));
				var m = zero(Math.floor(cTime%3600/60));
				var s = zero(Math.floor(cTime%60));
				return h+":"+m+":"+s;
			}
			function zero(num){
				if (num<10)
				{
					return "0"+num;
				}else{
					return ""+num;
				}
			}

2、实现进度条拖拽，进度条的实现是创一个大盒子，进度条外面的框就是大盒子，大盒子里面有两个小盒子，分别是拖拽点和拖拽过程后，经过部分的进度条 ，三个盒子

				div3.onmousedown = function(ev){
						var ev = ev || window.event;
						 //这里定下的x是  鼠标的位置减去  拖拽点离它的父级的距离  这里减去这个距离的原因 ，是比如拖拽点在进度条中间的时候，鼠标距离浏览器的位置减去进度条一半的距离  结果就是左边进度条距离浏览器的距离 ，然后看下面
						var x = ev.clientX - div3.offsetLeft;     	
						document.onmousemove = function(ev){
							var ev = ev || window.event;
							var _left = ev.clientX - x;           //拖拽过程中，拖拽点减去进度条距离浏览器的距离 就是拖拽的距离
							if (_left<0)
							{
								_left = 0;
							}else if (_left>div1.offsetWidth - div3.offsetWidth )
							{
								_left = div1.offsetWidth - div3.offsetWidth;
							}
							div3.style.left = _left+"px"	 ;
							div2.style.width = (_left+20) +"px";
			     	}

3、拖拽进度条实现时间改变，与时间改变实现进度条跟着变

			function nowTime(){                                  //获取当前时间 并在input里显示
				input[1].value = time(vid.currentTime);
				var n = vid.currentTime/vid.duration;               //获取当前时间占总时间的比例
				div3.style.left = n*(div1.offsetWidth - div3.offsetWidth)+"px";  这个比例乘以总长度 再赋给现在的位置
				
				div2.style.width = (20+n*(div1.offsetWidth - div3.offsetWidth))+"px";
			}
		
			function time(cTime){
				cTime = parseInt(cTime);
				var h = zero(Math.floor(cTime/3600));
				var m = zero(Math.floor(cTime%3600/60));
				var s = zero(Math.floor(cTime%60));
				return h+":"+m+":"+s;
			}
			function zero(num){
				if (num<10)
				{
					return "0"+num;
				}else{
					return " "+num;
				}
			}
			//播放进度条
			div3.onmousedown = function(ev){
				var ev = ev || window.event;
				var x = ev.clientX - div3.offsetLeft;
				document.onmousemove = function(ev){
					var ev = ev || window.event;
					var _left = ev.clientX - x;
					if (_left<0)
					{
						_left = 0;
					}else if (_left>div1.offsetWidth - div3.offsetWidth )
					{
						_left = div1.offsetWidth - div3.offsetWidth;
					}
					div3.style.left = _left+"px";
					div2.style.width = (_left+20) +"px";

					var n = _left/(div1.offsetWidth - div3.offsetWidth);         //这里获取到现在进度条所在的长度与总长度的比例
					//console.log(n);
					vid.currentTime = n*vid.duration;                             //这个比例*总时间 在赋给当前时间
					nowTime();                                                             //在重新获取现在时间
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
				}
			}

二、音频
用法和视频一样
audio 属性
autoplay 自动播放
controls 向用户显示播放控件
loop 循环
preload 是否等加载完再播放
src 要播放的音频的 URL。