audio/video具有如下自带的属性
- controls 自带的属性 显示控件
- autoplay 自动播放
- loop （弯曲，回路） 结束时重新播放
- preload (预先加载)
- src 要播放的音频地址
- source 拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）
具有的属性： - duration：属性返回当前音频/视频的长度，以秒计。
- currentTime：（流动的时间）返回已播放的事件,在javaScript中，可以设置currentTime的时间。
<body>
<audio src="johann_sebastian_bach_air.mp3" controls autoplay id="au"></audio>
<video src="Intermission-Walk-in_512kb.mp4" controls>
您的浏览器不支持video请升级浏览器
</video>
<script>
window.onload = function(){
var au = document.getElementById('au');
console.log(au.duration)
setInterval(function(){
console.log(au.currentTime);
},1000)
}
</script>
</body>
- paused (暂停)属性返回音频/视频是否已暂停。返回值是布尔值。
- ended （结束）属性返回音频/视频是否结束。返回值是布尔值。
- currentSrc（流动地址）属性返回音频/视频的地址。字符串。
- poster 为播放器添加海报图片
下面写一个小例子：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style: none;
margin:0;
padding:0;
float:left;
background: #ccc;
cursor: pointer;
width: 80px;
height: 30px;
border:1px solid #000;
line-height: 30px;
text-align: center;
}
li.active{
background: red;
}
</style>
</head>
<body>
<audio id="au"></audio>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
window.onload = function(){
var ali = document.getElementsByTagName('li');
var au = document.getElementById('au');
var arr = ["a","b","c","d","e","f","g"];
for(var i=0;i<ali.length;i++){
ali[i].index = i;
ali[i].onmouseover = function(){
for(var i=0;i<ali.length;i++){
ali[i].className = "";
}
au.src="http://s8.qhimg.com/share/audio/piano1/"+arr[this.index]+"4.mp3";
this.className = "active";
au.play();
}
}
}
</script>
</body>
THE END
