audio/video具有如下自帶的屬性
- controls 自帶的屬性 顯示控件
- autoplay 自動播放
- loop （彎曲，回路） 結(jié)束時重新播放
- preload (預(yù)先加載)
- src 要播放的音頻地址
- source 擁有兩份源文件的音頻播放器。瀏覽器應(yīng)該選擇它所支持的文件（如果有的話）
具有的屬性： - duration：屬性返回當(dāng)前音頻/視頻的長度，以秒計。
- currentTime：（流動的時間）返回已播放的事件,在javaScript中，可以設(shè)置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 （結(jié)束）屬性返回音頻/視頻是否結(jié)束。返回值是布爾值。
- 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
