学习方法总结

1.自己思考

2.查看手册

3.上网搜索

4.与老师，同学讨论解决

video

1.布局

	 	<video id="video1" width="500px" height="300px" ></video>
		<div id="control">
			<div id="duBar">
				<div id="proBar"></div>
				<div id="preload"></div>
			</div>
			<button id="videoBtn">播放</button>
		</div>
		<div id="listnum">	
		</div>
        <button id="nextVideo">next</button>
        <button id="circle"></button>
	 	

2.变量声明及播放器初始化

			var video1 = document.getElementById("video1");
			var videoBtn = document.getElementById("videoBtn");
			var ctxt = document.getElementById("ctxt");
			var dtxt = document.getElementById("dtxt");
			var duBar = document.getElementById("duBar");
			var proBar = document.getElementById("proBar");
			var dragBtn = document.getElementById("dragBtn");
			var preload = document.getElementById("preload");
			var nextVideo = document.getElementById("nextVideo");
			var listnum = document.getElementById("listnum");
			var circle = document.getElementById("circle");
			var st;
			var videoList = [
			    {src:"img/婚礼现场.webm",poster:"img/banner.jpg"},
			    {src:"img/movie.ogg",poster:"img/banner1.jpg"},
			    {src:"img/婚礼现场.webm",poster:"img/img1.jpg"},
			    {src:"img/movie.ogg",poster:"img/img6.jpg"},
			];
			//初始化
			var n = 0;
			video1.src = videoList[n].src;
			video1.poster = videoList[n].poster;
		

3.播放与暂停功能

			videoBtn.addEventListener("click", viedoControl);
			function viedoControl() {
				clearInterval(st);
				if(videoBtn.innerHTML == "播放") {
					video1.play();
					videoBtn.innerHTML = "暂停";
				} else {
					video1.pause();
					videoBtn.innerHTML = "播放";
				}
				st = setInterval(function() {
					var current = video1.currentTime;
					var duration = video1.duration;
					proBar.style.width = current / duration * 450 + "px";  //进度条
					var bufferTime = video1.buffered;
					var tbuffed = bufferTime.end(bufferTime.length-1);
					var buffPro = tbuffed/duration*450;
					preload.style.width = buffPro+"px" ;        //缓存条
				}, 300)
			}
		

4.进度条拖动

			function drag(){
			var a = false;
			duBar.addEventListener("mousedown",function(e){
				a = true ;
				clearInterval(st);
            	if(e.clientX < 500){
						proBar.style.width = e.clientX - 50 + "px";
						video1.currentTime = (e.clientX-50)/450*video1.duration;
					}
			});
			duBar.addEventListener("mousemove",function(e){
				if(a){
					if(e.clientX < 500){
						proBar.style.width = e.clientX - 50 + "px";
						video1.currentTime = (e.clientX-50)/450*video1.duration;
					}	
				}
			});
			window.addEventListener("mouseup",function(e){
				if(a){
					if(e.clientX < 500){
						proBar.style.width = e.clientX - 50 + "px";
					}
				}
				a = false;
			});
			}
			drag();
		

5.播放模式

			var circleType = ["列表循环","重复播放","随机播放"];
			var m = 0;
		    circle.innerHTML = circleType[m];
		    circle.addEventListener("click",function(){
		    	m++;
		    	if(m < 3){
		    		circle.innerHTML = circleType[m];
		    	}else{
		    		m = 0;
		    		circle.innerHTML = circleType[m];
		    	}
		    	
		    })
		

6.下一曲目

			//下一曲目
			nextVideo.addEventListener("click",function(){
				if(circle.innerHTML == "重复播放"){
					n = n;
				}else if(circle.innerHTML == "列表循环"){
					n++;
					if(n == videoList.length){
						n=0;
					}
				}else if(circle.innerHTML == "随机播放"){
					n = Math.floor(Math.random()*videoList.length); //播放进度跟随变化
				}
				video1.src = videoList[n].src;
				video1.poster = videoList[n].poster;
				playreset();
				videoBtn.addEventListener("click", viedoControl);
			});
			//重置
			function playreset(){
				video1.currentTime = 0;
				video1.buffered = 0;
				videoBtn.innerHTML = "播放";
				proBar.style.width = 0 + "px";
			}
		

7.播放列表

			//生成播放列表
			function List(){
				var str = "<ul>";
				for (var i = 0 ;i < videoList.length ; i++) {
					str+="<li>"+videoList[i].src.substr(4).split(".")[0]+"</li>"
				}
				str+="</ul>";
				return str;
			}
			listnum.innerHTML = List();
			
			//播放列表项目选择
			var videoNum = document.getElementsByTagName("li");
			for (var j = 0;j < videoNum.length;j++) {
				videoNum[j].cool = j;
				videoNum[j].onclick = function(){
					playreset();
					video1.src = videoList[this.cool].src;
					video1.poster = videoList[this.cool].poster;
					n = this.cool;
				}
			}
		

效果图

scroll

scroll示例