番禺建设网站企业,自助网站建设推广优化策略,建立网站费用怎么做会计分录,做网站推广用自己维护吗私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版#xff0c;配图更多#xff0c;CSDN博文图片需要手动上传#xff0c;因此文章配图较少#xff0c;看不懂的可以去菜鸡博客参考一下配图#xff01; 系列文章目录
前端系列文章——传送门 后端系列文章——传送…私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版配图更多CSDN博文图片需要手动上传因此文章配图较少看不懂的可以去菜鸡博客参考一下配图 系列文章目录
前端系列文章——传送门 后端系列文章——传送门 文章目录 私人博客系列文章目录多媒体标签videoaudio 多媒体标签的API自定义多媒体控件注 多媒体标签
video
只接受几种视屏格式ogg、mp4、avi
基本使用
video src视屏文件路径/video
!-- 兼容写法 --
videosource src路径1 typevideo/mp4/sourcesource src路径2 typevideo/ogg/sourcesource src路径3 typevideo/avi/source
/videocontrols属性出现默认的控制面板
autoplay属性自动播放
loop属性循环播放
width和height属性用来设置视屏可视区域的尺寸但是宽和高一直会保持等比所以设置一个就行了如果都设置了会出现黑边但可视区域是等比的
audio
只接受ogg和mp3格式使用方式和video是一样的
audio src视屏文件路径/audio
!-- 兼容写法 --
audiosource src路径1 typeaudio/mp3/sourcesource src路径2 typeaudio/ogg/source
/audiocontrols属性出现默认的控制面板
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 classmediadiv classplayOrPausei classiconfont icon-zanting/i/divdiv classtimespan classcurrentMinute00/span:span classcurrentSecond00/span/span classdurationMinute00/span:span classdurationSecond00/span/divdiv classplayRangediv classcurrentRange/divdiv classplayBtn/div/divdiv classvolumediv classvolumeRangediv classcurrentVolume/divdiv classvolumeBtn/div/divi classiconfont icon-volume/i/div
/div样式
.media{width: 800px;height: 50px;border:3px solid #bbb;margin:300px auto;
}
.mediadiv{float:left;line-height: 50px;margin:0 10px;
}
.mediadiv.playRange{width: 200px;height: 6px;background-color: #333;margin:22px 10px;border-radius:3px;position: relative;
}
.mediadiv.playRange .currentRange{width: 100px;height: 6px;background-color: rgb(9, 143, 153);position:absolute;left: 0;top: 0;
}
.mediadiv.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 minute10?0minute:minute;second second10?0second: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 minute10?0minute:minute;second second10?0second: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
