H5与js实现手机端和pc端自适应播放器 |
您所在的位置：网站首页 › videojs-h5手机端h5播放器怎样把视频下载 › H5与js实现手机端和pc端自适应播放器 |
H5与js实现手机端和pc端自适应播放器
|
h5视频播放
实现效果自适应实现实现
实现效果
pc端 1、允许网页自动调整，在html文件的头部添加一行viewport元标签 2、屏幕在不同的尺寸的情况下定义不同的样式，在此以960为界 @media screen and (max-width: 960px){ /* 手机端CSS代码 */ } @media screen and (min-width: 960px){ /* 电脑端CSS代码 */ } 实现html 播放列表 视频一 视频二 视频三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 list[i].onclick = function(){ for(var j=0;j 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); |
手机端 
【本文地址】
今日新闻 |
推荐新闻 |