一)HTML5页面中的多媒体
在HTML5中新增了两个新的元素--video元素和audio元素。
video元素专门用来播放网络上的视频或电影
audio元素专门用来播放网络上的音频数据。
这两个元素的使用方法也是非常简单的，只要把播放音频的url指定的该元素的src就可以了。如下：
<video src="http://xxxx.mp3">你的浏览不支持video属性</video>
另外一个元素的使用方法跟上一个是一样的。
二) HTML5元素中的基本属性
video属性和audio属性所具有得属性大致相同，接下来介绍其属性。
属性 | 描述 |
controls | 显示或隐藏用户控制界面 |
autoplay | 媒体是否自动播放 |
Loop | 媒体是否循坏播放 |
currentTime | 开始到播放现在所用的时间 |
duration | 媒体总时间(只读) |
volume | 0.0-1.0的音量相对值 |
muted | 是否静音 |
autobuffer | 开始的时候是否缓存加载,autoplay加载的时候可以忽略次属性。 |
注意:video标签拥有着额外的属性
poster | 视频播放器的预览图片 |
Width,height | 设置视频的尺寸 |
videoWidth,videoHeight | 视频实际尺寸 |
注意:如果想读取duration()总时长，必须监听canplay事件
<script>
window.onload=function(){
var oVideo=document.getElementById("video")
console.log(oVideo.duration)
oVideo.addEventListener("canplay",function(){
console.log(oVideo.duration)
})
}
</script>3) 多媒体元素常用方法
媒体播放时，HTML5为我们提供了3种比较常用的方法
方法 | 描述 |
media.paly() | 视频播放 |
media.pause() | 暂停视频 |
media.load() | 重新加载视频 |
- 360音阶导航
- 自定义视频播放
- 自定义音乐播放
4) 多媒体常用事件
在利用video元素或audio元素读取或播放媒体数据时，会触发一系列的事件。如果使用javascript脚本捕获事件，就可以对这些事件处理，我们常常要利用 addEventListener 方法VideoElement.addEventListener(type,listener,useCaptrue)
VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数，useCaptrue是一个布尔值，表示事件的响应顺序,该值如果是true，浏览器采用captrue响应方式,如果为false，浏览器采用budding响应方式，默认情况为false。
canplay：媒体元素能够播放触发
ontimeupdate:监听媒体元素进度条事件
下面是我根据今天所学习的内容所完成的练习
先来效果图：
网易云的音乐播放器
功能：
简单的实现上一首，下一首，暂停开始的功能
这里CSS就不放代码了
HTML代码：
命名规则还不太熟悉，请原谅。
<div class="bg">
<div class="hand">
<div class="left">
<a class="btn"></a>
</div>
</div>
<div class="wrap">
<div class="btns">
<a class="prev" title="上一首" id="prev"></a>
<a class="ply" title="暂停" id="play"></a>
<a class="next" title="下一首" id="next"></a>
</div>
<div class="head">
<img src="img/6.jpg" />
<a class="mask"></a>
</div>
<div class="play">
<div class="words"></div>
<div class="m-pbar">
<div class="barbg">
<div class="rdy" id="rdy"></div>
<div class="cur" id="cur" style="width: 0%;">
<span class="btn-r" id="btn-r"></span>
</div>
</div>
<span class="j-flag time" id="total_time">
00:00
</span>
<em class="em-x">/</em>
<em id="em" class="em">00:00</em>
</div>
</div>
<div class="oper">
<a class="icn icn-add" title="收藏"></a>
<a class="icn icn-share" title="分享"></a>
</div>
<div class="ctrl">
<div class="m-vol">
<div class="barbg-b" id="barbg-b"></div>
<div class="vbg" id="vbg">
<div class="vbg-cur" id="vbg-cur"></div>
<span class="vbg-btn" id="vbg-btn"></span>
</div>
<a class="icn icn-vol" id="volume"></a>
<a class="icn icn-loop" title="循环"></a>
<span class="add">
<a class="icn icn-list" id="icn-bf" title="播放列表">0</a>
</span>
</div>
</div>
</div>
</div>
<div class="list" id="list-1">
<ul class="list_ul" id="list-ul">
</ul>
</div>
<audio id="audio"></audio>JS代码：
<script>
var oEm=document.getElementById("em")
var oSpan=document.getElementById("total_time")
var oPrev=document.getElementById("prev")
var oPlay=document.getElementById("play")
var oNext=document.getElementById("next")
var oAudio=document.getElementById("audio")
var oRdy=document.getElementById("rdy")
var oCur=document.getElementById("cur")
var oBtnr=document.getElementById("btn-r")
var oVolume=document.getElementById("volume")
var oBarbgb=document.getElementById("barbg-b")
var oVbg=document.getElementById("vbg")
var oCur1=document.getElementById("vbg-cur")
var oBtn=document.getElementById("vbg-btn")
var oBf=document.getElementById("icn-bf")
var oNone=document.getElementById("list-1")
var oUl=document.getElementById("list-ul")
var oLi=oUl.getElementsByTagName("li")
//console.log(oLi)
var num=0
var arr=["video/2.mp3","video/3.mp3","video/4.mp3","video/5.mp3","video/6.mp3"]
var arr1=["明日之星","今天有酒今天醉","THE girl","喜欢你"]
oAudio.src=arr[num]
//转换总时长
oAudio.addEventListener("canplay",function(){
oSpan.innerHTML = getMin(this.duration)
})
//点击开始播放
oPlay.onclick=function(){
if (oAudio.paused) {
oAudio.play()
oPlay.style.backgroundPositionY = -165+"px"
}else{
oAudio.pause()
oPlay.style.backgroundPositionY = -204+"px"
}
}
//监听进度变化
oAudio.ontimeupdate=function(){
var pre=Math.floor(oAudio.currentTime/oAudio.duration*493)
oCur.style.width=pre+"px"
oEm.innerHTML=getMin(oAudio.currentTime)
oBtnr.style.left=oCur.style.width
}
//点击进度变化
oRdy.onclick=function(e){
var l=e.clientX-646-oRdy.offsetLeft
oAudio.currentTime=(l/493)*oAudio.duration
console.log(l)
//没完善
}
oBtnr.onmousedown=function(e){
document.onmousemove=function(e){
var l=e.clientX-646-oRdy.offsetLeft
oAudio.currentTime=(l/493)*oAudio.duration
}
document.onmouseup=function(){
document.onmousedown=null
document.onmousemove=null
}
return false
}
//自动播放
oAudio.addEventListener("ended",function(){
num++
document.onmousedown=null
document.onmousemove=null
oPlay.style.backgroundPositionY = -164+"px"
oAudio.src=arr[num]
oAudio.play()
})
//上一首
oNext.onclick=function(){
oPlay.style.backgroundPositionY = -204+"px"
num++
if (num>arr.length-1) {
num=0
}
oAudio.src=arr[num]
}
//下一首
oPrev.onclick=function(){
oPlay.style.backgroundPositionY = -204+"px"
num--
if (num<0) {
num=arr.length-1
}
oAudio.src=arr[num]
}
//点击音频
oVolume.onclick=function(e){
//alert(1)
oBarbgb.style.display="block"
oVbg.style.display="block"
}
//点击音频的进度条
/*oVbg.onclick=function(e){
var l=e.clientY-78-this.offsetTop
oCur1.style.height=l+"px"
oBtn.style.top=l+"px"
oAudio.volume=l/97
console.log(l)
}*/
//拖动音频进度条中的点
oBtn.onmousedown=function(e){
document.onmousemove=function(e){
var l=e.clientY-97-this.offsetTop
oBtn.style.top=l+"px"
//oAudio.volume=l/97
}
document.onmouseup=function(){
document.onmousedown=null
document.onmousemove=null
}
return false
}
//点击播放列表
var str=''
oBf.onclick=function(){
oNone.style.display="block"
oBf.innerHTML=arr1.length
//console.log(oLi.length)
for (var i=0;i<arr1.length;i++) {
str+='<li><a>'+arr1[i]+'</a></li>'
}
oUl.innerHTML=str
}
//获取分钟的函数
function getMin(time){
var m = Math.floor(time/60)
var s = Math.floor(time%60)
if(m<=9){
m="0"+m
}
if(s<=9){
s = "0"+s
}
return m+":"+s
}
</script>完成点击音频的功能时出现了点了问题，还没解决，望理解。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
