video
controls = “controls”--->控件
width和height指定的是video標籤的高寬
audio標籤指定高寬無用
- 容器
.avi .mp4 是容器的格式，決定怎麼講視頻存起來，不關係儲存的內容
視頻文件：視頻軌道，音頻軌道，元數據（視頻的封面，標題，子標題，字幕）
視頻格式 ： .mp4 .flv .webm .avi
音頻格式： .mp3 .acc .agg
- 編解碼器
對一段特定音頻或視頻進行解碼和編碼
視頻編解碼器： H.264 VP8 Ogg Theroa
音頻編解碼器 ： AAC MPEG-3 Ogg Vorbis
- 格式轉化
<video controls width="300" height="300">
<source src="img/test.mp4" type="video/mp4">
<source src="img/test.webm" type="video/webm">
<source src="img/test.ogv" type="video/ogv">
當前瀏覽器不支持 video直接播放，點擊這裏下載視頻： <a href="img/test.mp4">下載視頻</a>
</video>
<audio controls >
<source src = "img/test.mp3" type="audio/mpeg ">
<source src = "img/test.Ogg" type="audio/Ogg;codecs = 'vorbis'">
<source src = "img/test.aac" type="audio/aac;codecs = 'acc'">
<!-- MP3是audio類型的，mp4是video類型的 -->
</audio>
video標籤的屬性
poster:視頻未播的海報界面
controls：顯示或隱藏用戶控制頁面
autoplay：媒體是否自動播放
loop：是否循環播放
muted：是否靜音
perload： 告訴作者認爲用戶達到的最佳體驗 none：瀏覽器不需要緩存，metadata：提示儘管用戶不需要下載視頻，但是可以加載抓取元數據。auto = " "：如果需要的話，可以下載整個視頻
property屬性
currentTime:開始播放到現在所用的時間
duration：媒體總時間
muted：是否靜音
volume：音量相對值
paused：是否暫停
ended：是否完畢
error：媒體錯誤的時候返回錯誤代碼
currentSrc：以String形式返回媒體地址
視頻多出的：poster ：海報 width height videoHeight videoHeight：本身視頻的分辨率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <video src="img/test.mp4" autoplay loop muted preload = "metadata" width="500" height="400" poster="img/a.png" ></video>
<audio src="img/test.mp3" controls></audio> -->
<video src="img/test.mp4" controls width="500" height="400" ></video>
<audio src="img/test.mp3" controls></audio>
</body>
<script>
window.onload = function(){
var video = document.querySelector("video")
var audio = document.querySelector("audio")
console.log(video.duration)//總時間
console.log(video.currentTime)//開始播放到現在的時間
setInterval(function(){
console.log(video.currentTime)//開始播放到現在的時間
},1000)
console.log(video.muted)//是否靜音
console.log(video.volume)//音量相對值
//音量屬性和靜音屬性要同時設置 ---->是可讀寫屬性
console.log(video.paused)//是否暫停
console.log(video.ended)//是否播放結束
console.log(video.error)//錯誤時，返回錯誤地址
console.log(video.currentSrc)//路徑地址
video.poster = "img/a.png"
console.log(video.poster)
}
</script>
</html>
音視頻js相關函數
play() : 媒體播放
pause() : 媒體暫停
load() : 重新加載媒體
<script>
window.onload = function(){
var video = document.querySelector("video")
var audio = document.querySelector("audio")
video.play()
setTimeout(function(){
video.pause()//暫停
},5000)
video.load//重新加載 通過source函數換要重新加載
}
</script>
js相關事件
視頻:
abort 在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。
canplay 在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的readyState。
canplaythrough 在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意：手動設置currentTime會使得firefox觸發一次canplaythrough事件，其他瀏覽器或許不會如此。
durationchange 元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。
emptied 媒體被清空（初始化）時觸發。
ended 播放結束時觸發。
error 在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling獲得詳細信息。
loadeddata 媒體的第一幀已經加載完畢。
loadedmetadata 媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息。
loadstart 在媒體開始加載時觸發。
mozaudioavailable 當音頻數據緩存並交給音頻層處理時
pause 播放暫停時觸發。
play 在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放。
playing 在媒體開始播放時觸發（不論是初次播放、在暫停後恢復、或是在結束後重新開始）。
progress 告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息可以在元素的buffered屬性中獲取到。
ratechange 在回放速率變化時觸發。
seeked 在跳躍操作完成時觸發。
seeking 在跳躍操作開始時觸發。
stalled 在嘗試獲取媒體數據，但數據不可用時觸發。
suspend 在媒體資源加載終止時觸發，這可能是因爲下載已完成或因爲其他原因暫停。
timeupdate 元素的currentTime屬性表示的時間已經改變。
volumechange 在音頻音量改變時觸發（既可以是volume屬性改變，也可以是muted屬性改變）.。
waiting 在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發
音頻:
abort 在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。
canplay 在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的readyState。
canplaythrough 在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意：手動設置currentTime會使得firefox觸發一次canplaythrough事件，其他瀏覽器或許不會如此。
durationchange 元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。
emptied 媒體被清空（初始化）時觸發。
ended 播放結束時觸發。
error 在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling獲得詳細信息。
loadeddata 媒體的第一幀已經加載完畢。
loadedmetadata 媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息。
loadstart 在媒體開始加載時觸發。
mozaudioavailable 當音頻數據緩存並交給音頻層處理時
pause 播放暫停時觸發。
play 在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放。
playing 在媒體開始播放時觸發（不論是初次播放、在暫停後恢復、或是在結束後重新開始）。
progress 告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息可以在元素的buffered屬性中獲取到。
ratechange 在回放速率變化時觸發。
seeked 在跳躍操作完成時觸發。
seeking 在跳躍操作開始時觸發。
stalled 在嘗試獲取媒體數據，但數據不可用時觸發。
suspend 在媒體資源加載終止時觸發，這可能是因爲下載已完成或因爲其他原因暫停。
timeupdate 元素的currentTime屬性表示的時間已經改變。
volumechange 在音頻音量改變時觸發（既可以是volume屬性改變，也可以是muted屬性改變）.。
waiting 在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發
音階導航練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
overflow: hidden;
height: 100%;
background-color: aqua;
}
ul{
list-style: none;
margin: 200px auto;
width: 908px;
height: 38px;
background-color: blanchedalmond;
border:1px solid;
overflow: hidden;
}
ul>li{
float: left;
height: 100%;
width: 100px;
text-align: center;
line-height: 38px;
}
ul>li:not(:last-child){
border-right:1px solid ;
}
a{
text-decoration: none;
display: block;
color: black;
}
ul>li>.down{
width: 100%;
height: 38px;
background-color: chartreuse;
transition: 0.5s ;
}
ul>li:hover .down {
transform: translateY(-38px);
}
</style>
</head>
<body>
<div id="wrap">
<audio id="au"></audio>
<ul class="nav">
<li data-flag = "a">
<a href="javascript:;">我的主頁</a>
<div class="down"></div>
</li>
<li >
<a href="javascript:;">新聞頭條</a>
<div class="down"></div>
</li>
<li data-flag = "b">
<a href="javascript:;">電視劇</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">小說</a>
<div class="down"></div>
</li>
<li data-flag = "c">
<a href="javascript:;">旅遊度假</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">團購</a>
<div class="down"></div>
</li>
<li data-flag = "d">
<a href="javascript:;">大長腿</a>
<div class="down"></div>
</li>
<li>
<a href="javascript:;">小短腿</a>
<div class="down"></div>
</li>
<li data-flag = "e">
<a href="javascript:;">長脫髮</a>
<div class="down"></div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
// http://s8.qhimg.com/share/audio/piano1/g4.mp3
var liNodes = document.querySelectorAll('.nav>li')
var audio = document.getElementById("au")
for(var i = 0;i<liNodes.length;i++){
liNodes[i].addEventListener("mouseenter",function(){
// var flag = this.getAttribute("data-flag ")
var flag = this.dataset.flag==undefined?this.dataset.flag:this.getAttribute("data-flag ")
if(flag){
audio.src = "http://s8.qhimg.com/share/audio/piano1/"+flag+"4.mp3"
audio.play();
}
})
}
</script>
</html>