HTML代码:
<div id="top">
<div class="top_left">
<h3>精选歌曲</h3>
<ul>
<li>Jming - Alan Walker - Faded Alone (Albim Mashup)</li>
<li>Mukyo木西 - 我的将军啊 (女版)</li>
<li>侯强 - 回心转意</li>
<li>买辣椒也用券 - 起风了</li>
<li>枫宇辰 - 是时候表演真正的技术了 (DJ)</li>
</ul>
</div>
<div class="top_right">
<ul>
<li><img src="img/u=149880980,441535947&fm=27&gp=0.jpg"/></li>
</ul>
</div>
<div id="buttom_aa">
<video controls="controls" id="vd" style="float: right;"height="50px" width="410px"autoplay="autoplay" onended="xiays()">
</video><br />
<div class="yo">
<input id="prev" type="button" value="上一首" onclick="xiays()"></input>
<input type="button" value="暂停/播放" onclick="playAndpaus()"></input>
<input id="next" type="button" value="下一首" onclick="shangys()"></input>
<input type="button" onclick="sound()" value="开启静音" id="aa"/>
<input type="button" onclick="addVol()" value="音量+" />
<input type="button" onclick="cutVol()" value="音量-" />
<select id="sele"></select>
音量<span id="sp">0.1</span>
</div>
</div>
</div>
CSS代码:
body,ul,li,dl,dt,dd{
margin: 0px;padding: 0px;list-style-type: none;
}
#top{
width: 800px;
height:420px;
border: 1px solid darkgray;
margin: 0px auto;
}
#buttom_aa{
width: 799px;
height: 81px;
border: 1px solid darkgray;
float: left;
background-color: gray;
}
.top_left{
width: 190px;
height: 335px;
border: 1px solid darkgray;
float: left;
}
.top_right{
width: 605px;
height: 335px;
border: 1px solid darkgray;
float: right;
}
.top_left img{
width: 50px;
height: 50px;
border: 1px solid darkgray;
margin-left: 10px;
margin-top:2px;
}
h3{
text-align: center;
}
.top_left li{
font-size: 13px;
text-align: center;
line-height: 30px;
}
a{
text-decoration: none;
color: #333333;
}
.top_right img{
width: 605px;
height: 335px;
border: 1px solid darkgray;
}
.yo input{
margin-top: 8px;
}
span{
font-size: 10px;
}
js代码:
var vd=document.getElementById("vd");
function playAndpaus(){
if(vd.paused){
vd.play();
document.getElementById("paly").value="暂停";
}else{
vd.pause();
document.getElementById("paly").value="播放";
}
}
function sound(){
if(vd.muted){
vd.muted=false;
document.getElementById("aa");
}else{
vd.muted=true;
document.getElementById("aa");
}
}
function addVol(){
if(vd.muted==true){
vd.muted=false;
}
if(vd.volume<1&&vd.volume>=0){
vd.volume=vd.volume+0.1;
document.getElementById("sp").innerHTML=vd.volume.toFixed(1);
}
if(vd.volume==1){
alert("已经是最大声了!");
}
}
function cutVol(){
if(vd.muted==true){
vd.muted=false;
}
if(vd.volume<=1&&vd.volume>=0.1){
vd.volume=vd.volume-0.1;
document.getElementById("sp").innerHTML=vd.volume.toFixed(1);
}
if(vd.volume<0.1){
alert("已经是最小声了!");
vd.muted=true;
}
}
var music={"msi":[
{"vl":"img/Jming - Alan Walker - Faded Alone (Albim Mashup).mp3","name":"Alan Walker - Faded Alone (Albim Mashup)"},
{"vl":"img/Mukyo木西 - 我的将军啊 (女版).mp3","name":"木西 - 我的将军啊 (女版)"},
{"vl":"img/买辣椒也用券 - 起风了.mp3","name":"买辣椒也用券 - 起风了"},
{"vl":"img/侯强 - 回心转意.mp3","name":"侯强 - 回心转意"},
{"vl":"img/枫宇辰 - 是时候表演真正的技术了 (DJ).mp3","name":"枫宇辰 - 是时候表演真正的技术了"}
]};
var index=0;
var vd=document.getElementById("vd");
var seles=document.getElementById("sele");
var opp=seles.options;
function xiays(){
index++;
if(index==music.msi.length){
index=0;
}
vd.src=music.msi[index].vl;
vd.play();
xians();
}
function xians(){
for (var i=0;i<music.msi.length;i++) {
if(vd.src.indexOf(music.msi[i].vl)>0){
opp[i].selected=true;
}
}
}
function shangys(){
index--;
if(index==-1){
index=music.msi.length-1;
}
vd.src=music.msi[index].vl;
vd.play();
xians();
}
function oo(){
for (var j=0;j<music.msi.length;j++) {
var op=music.msi[j].name;
var ops=music.msi[j].vl;
seles.add(new Option(op,ops));
}
}
oo();
seles.onchange=function(){
vd.src=this.value;
vd.play();
}