私人博客

许小墨の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){// 让小球过来 - 获取光标按下的位置，计算小球的leftvar 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){// 让小球过来 - 获取光标按下的位置，计算小球的leftvar 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){// 让小球过来 - 获取光标按下的位置，计算小球的leftvar 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