H5与js实现手机端和pc端自适应播放器

实现效果

pc端

手机端

自适应实现

1、允许网页自动调整，在html文件的头部添加一行viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">	

2、屏幕在不同的尺寸的情况下定义不同的样式，在此以960为界

@media screen and (max-width: 960px){
	 /* 手机端CSS代码 */
}

@media screen and (min-width: 960px){
	  /* 电脑端CSS代码 */
  }

实现

html

 <div id="container">
	<video id="left" controls="controls" autoplay="autoplay" src="source/1.webm" >
	</video>
	<div id="right">
		<div class="item1">播放列表</div>
		<div class="item"  value="source/1.webm" >视频一</div>
		<div class="item"  value="source/2.webm">视频二</div>
		<div class="item"  value="source/3.webm">视频三</div>
	</div>
 </div>

css

    #container{
		width: 100%;
		height: 100%;
		float: left;
		background-color: black;
	}
			
	#right .item{
		list-style: none;
		text-align: center;
		height: 50px;
		line-height: 50px;
	}
			
	#right .item1{
		list-style: none;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 24px;
	}
			
			
	@media screen and (max-width: 960px){
			  /* 手机端CSS代码 */
		#left{
			width: 100%;
			height: 100%;
		 }
			  
	   #right{
			width: 100%;
			height: 100%;
			color: white;
			text-align: center;
		 }
	}
			 
	@media screen and (min-width: 960px){
			  /* 电脑端CSS代码 */
	    #left{
			 width: 80%;
			 height: 100%;
		     float: left;
		 }  
	   #right{
		width: 20%;
		height: 100%;
		color: white;
		text-align: center;
		float: left;
		}
			  
	   #right .item:first-child{
		font-size: 1.5rem;
		margin-top: 10px;
			}
        }
			
	.active{
	   background-color: red;
		}	

视频顺序播放与切换

var video = document.getElementById("left");
		var list = document.getElementsByClassName("item");
		var len = list.length; // 播放列表的长度
		var url = [];
	    var cur =0; // 当前播放的视频
		var pre=0;
		list[cur].classList.add("active");
		for(var i=1;i<len;i++){
		  url[i] = list[i].getAttribute("value");
		}
		//视频切换 
	  for(var i=0;i<len;i++){
		list[i].onclick = function(){
		   for(var j=0;j<len;j++){
		      if(list[j] == this){
               video.setAttribute("src",this.getAttribute("value")); //获取src路径
	           video.setAttribute('autoplay','autoplay');//自动播放
			   list[pre].classList.remove("active")
		       list[j].classList.add("active");
			    pre=j;
		        cur=j;//定位下一播放位置
		        }
		          }
		      }
		     }   
		//监听顺序播放	 
		 video.addEventListener('ended', function () {
			    list[pre].classList.remove("active"); //先移除样式
			    cur=(cur+1)%3;
				pre=cur;
				list[cur].classList.add("active");  //添加样式
		        video.setAttribute("src",list[cur].getAttribute("value"));
				 video.setAttribute('autoplay','autoplay');
		    }, false);