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>