本文详细介绍了HTML5中的video和audio标签的使用，包括支持的格式、属性和API接口。同时，文章展示了如何创建自定义的多媒体控制界面，包括播放、暂停、音量调节等功能，并提供了JavaScript实现示例。
私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！
系列文章目录
多媒体标签
video
只接受几种视屏格式：ogg、mp4、avi
基本使用：
<video src="视屏文件路径"></video>
<!-- 兼容写法 -->
<video>
<source src="路径1" type="video/mp4"></source>
<source src="路径2" type="video/ogg"></source>
<source src="路径3" type="video/avi"></source>
</video>
controls属性，出现默认的控制面板
autoplay属性，自动播放
loop属性，循环播放
width和height属性，用来设置视屏可视区域的尺寸，但是宽和高一直会保持等比，所以设置一个就行了，如果都设置了，会出现黑边，但可视区域是等比的
audio
只接受ogg和mp3格式，使用方式和video是一样的
<audio src="视屏文件路径"></audio>
<!-- 兼容写法 -->
<audio>
<source src="路径1" type="audio/mp3"></source>
<source src="路径2" type="audio/ogg"></source>
</audio>
controls属性，出现默认的控制面板
autoplay属性，自动播放
loop属性，循环播放
多媒体标签的API
在谷歌浏览器中，默认不能自动播放，默认直接调用play方法播放，需要一个自定义按钮来解决或设置video静音
/* 方法 */
video/audio.play() // 播放
video/audio.pause() // 暂停
/* 属性 */
video.duration // 视屏总时长
video.muted // 设置媒体静音，值为true或false，获取媒体是否静音
video.volume // 获取媒体当前声音(0~1)，设置声音(0~1)
video.currentTime // 获取媒体当前时间，设置当前时间，单位秒
video/audio.paused // 查看媒体是否暂停
video/audio.playbackRate // 获取/设置播放倍速
/* 事件 */
loadstart：视屏开始加载时触发
progress：浏览器正在下载视屏时触发 - 相当于在加载
canplay：媒体加载完毕，可以播放的时候触发
play：视屏正在播放的时候触发
pause：视屏暂停的时候触发
seeking：视屏开始要跳到新位置的时候触发
seeked：视屏已经跳到新位置的时候触发
waiting：视屏加载等待时触发
timeupdate：只要播放时间更改就会触发
ended：媒体播放结束时触发
error：视屏播放错误时触发
volumechange：视屏音量改变时触发
ratechange：视屏播放速度更改时触发
自定义多媒体控件
布局
<div class="media">
<div class="playOrPause">
<i class="iconfont icon-zanting"></i>
</div>
<div class="time">
<span class="currentMinute">00</span>
:
<span class="currentSecond">00</span>
/
<span class="durationMinute">00</span>
:
<span class="durationSecond">00</span>
</div>
<div class="playRange">
<div class="currentRange"></div>
<div class="playBtn"></div>
</div>
<div class="volume">
<div class="volumeRange">
<div class="currentVolume"></div>
<div class="volumeBtn"></div>
</div>
<i class="iconfont icon-volume"></i>
</div>
</div>
样式
.media{
width: 800px;
height: 50px;
border:3px solid #bbb;
margin:300px auto;
}
.media>div{
float:left;
line-height: 50px;
margin:0 10px;
}
.media>div.playRange{
width: 200px;
height: 6px;
background-color: #333;
margin:22px 10px;
border-radius:3px;
position: relative;
}
.media>div.playRange .currentRange{
width: 100px;
height: 6px;
background-color: rgb(9, 143, 153);
position:absolute;
left: 0;
top: 0;
}
.media>div.playRange .playBtn{
width: 20px;
height: 20px;
background-color:rgb(9, 143, 153);
border-radius:50%;
position: absolute;
left: 90px;
top: -7px;
}
.media .volume{
position:relative;
}
.media .volumeRange{
width: 4px;
height: 100px;
background-color: #333;
border-radius:2px;
position:absolute;
top:-100px;
left: 10px;
display:none;
}
.media .volumeRange .currentVolume{
width: 4px;
height: 50px;
background-color: blue;
border-radius:2px;
position:absolute;
left: 0;
bottom:0;
}
.media .volumeRange .volumeBtn{
width: 15px;
height: 15px;
border-radius:50%;
background-color: blue;
position:absolute;
left: -5px;
bottom:40px;
}
.media i{
font-size: 24px;
}
js效果：
// 控制音量的面板显示隐藏
$('.media .volume').hover(function(){
$(this).find('.volumeRange').show()
},function(){
$(this).find('.volumeRange').hide()
})
// 点击切换小图标
$('.media .playOrPause i').click(function(){
if($(this).hasClass('icon-bofang')){
$(this).removeClass('icon-bofang').addClass('icon-zanting')
// 多媒体播放
$('audio')[0].play()
}else{
$(this).removeClass('icon-zanting').addClass('icon-bofang')
// 多媒体暂停
$('audio')[0].pause()
}
})
$('.media .volume i').click(function(){
if($(this).hasClass('icon-volume')){
$(this).removeClass('icon-volume').addClass('icon-jingyin')
// 让多媒体静音
$('audio')[0].muted = true
// 让音量小球下来
$('.currentVolume').height(0)
console.log(-$('.volumeBtn').height()/2)
$('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")
}else{
$(this).removeClass('icon-jingyin').addClass('icon-volume')
// 取消静音
$('audio')[0].muted = false
}
})
// 拖拽播放进度
$('.playRange').mousedown(function(e){
// 让小球过来 - 获取光标按下的位置，计算小球的left
var x = e.pageX;
var left = x - $('.playBtn').width()/2;
$('.playBtn').offset({left})
var width = $('.playBtn').position().left + $('.playBtn').width()/2
$('.currentRange').width( width )
// // 根据当前拖拽好的位置设置多媒体
// // 比例 = 当前播放过的进度条长度 / 进度条总长度
var percent = width / $('.playRange').width()
// 当前播放时长 = 总时长*比例
var duration = $('audio')[0].duration;
var currentTime = percent * duration;
$('audio')[0].currentTime = currentTime;
// $('audio')[0].pause()
// 移动
$(this).mousemove(function(e){
// 让小球过来 - 获取光标按下的位置，计算小球的left
var x = e.pageX;
var left = x - $('.playBtn').width()/2;
$('.playBtn').offset({left})
var width = $('.playBtn').position().left + $('.playBtn').width()/2
$('.currentRange').width( width )
$('audio')[0].pause()
$('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
})
})
$('.playRange').mouseup(function(e){
$('.playRange').off('mousemove')
var width = $('.currentRange').width()
// 根据当前拖拽好的位置设置多媒体
// 比例 = 当前播放过的进度条长度 / 进度条总长度
var percent = width / $('.playRange').width()
// 当前播放时长 = 总时长*比例
var duration = $('audio')[0].duration;
var currentTime = percent * duration;
$('audio')[0].currentTime = currentTime;
$('audio')[0].play()
$('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
})
// 拖拽音量
$('.volumeRange').mousedown(function(e){
// 让小球过来 - 获取光标按下的位置，计算小球的left
var y = e.pageY;
var top = y - $('.volumeBtn').width()/2
$('.volumeBtn').offset({top})
$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
// 计算音量的比例
var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
$('audio')[0].volume = volume
$(this).mousemove(function(e){
var y = e.pageY;
var top = y - $('.volumeBtn').width()/2
$('.volumeBtn').offset({top})
$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
// 计算音量的比例
var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
$('audio')[0].volume = volume
})
})
$(document).mouseup(function(e){
$('.volumeRange').off('mousemove')
})
// 当多媒体加载完成的时候获取多媒体的播放时长
$('audio')[0].addEventListener('canplay',canplay)
function canplay(){
var duration = this.duration; // 秒
// 换算成分钟和秒
var minute = parseInt(duration/60)
var second = parseInt(duration%60);
minute = minute<10?'0'+minute:minute;
second = second<10?'0'+second:second;
$('.durationMinute').text(minute)
$('.durationSecond').text(second)
// 将播放进度小球放到0的位置
$('.playBtn').css('left',-$('.playBtn').width()/2 + "px")
$('.currentRange').width(0)
// 将音量设置在最顶端
$('.volumeBtn').css('top',-$('.volumeBtn').height()/2 + "px")
$('.currentVolume').height($('.volumeRange').height())
}
// 正在播放过程中获取当前播放的时长
$('audio')[0].addEventListener('timeupdate',timeupdate)
function timeupdate(){
// 获取 当前时长
var currentTime = this.currentTime;
var minute = parseInt(currentTime/60)
var second = parseInt(currentTime%60);
minute = minute<10?'0'+minute:minute;
second = second<10?'0'+second:second;
$('.currentMinute').text(minute)
$('.currentSecond').text(second)
// 计算当前播放过多少的比例
var duration = this.duration;
var percent = currentTime / duration;
// 计算播放过的进度条的长度
var width = $('.playRange').width() * percent;
$('.currentRange').width(width)
$('.playBtn').css('left',width-$('.playBtn').width()/2 + "px")
}
// 多媒体播放结束
$('audio')[0].addEventListener('ended',ended)
function ended(){
$('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
}
注
本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
