为什么会有audio/或者说video的出现是为了解决一些什么问题?
在H5之前,如果想在浏览器上播放视频音频的话都是需要通过一些插件的支持(如flash),但是因为浏览器和插件之间存在一些兼容性的问题,所以其了解决这些问题就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标 使其可以统一化、简洁化
1、audio
<audio src="荣耀.mp3" preload="metadata" controls="controls"></audio>
(1) src():本地音频文件的地址,也可以引用外部资源
(2) controls:由浏览器提供的音频控件
(3) preload:预加载,让文件预先进行缓冲,优化播放速度。
三个可选值:
auto 对整个音频文件进行加载,默认值。
Metadata:只加载文件的元数据(第一帧,播放总时长,播放列表等)
<audio src="荣耀.mp3" autoplay loop controls="controls"></audio>
Loop:循环播放,布尔类型在标签内使用时默认为true。
Autoplay:自动播放,布尔类型在标签内使用是默认为true
控制函数和常用属性
(1)playOrPaused():控制音频的播放和暂停。
Play():播放
Pause():暂停
function playOrPaused(id, obj){
if(audio.paused){
audio.play();
obj.innerHTML='暂停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
(2)getCurrentTime():获取已播放的时长,或者说是播放了多长时间
function getCurrentTime(){
alert(audio.currentTime+"s")
}
(3)duration():获取音频的总时长
function duration(){
alert(audio.duration+"s")
}
(4)hideOrShowControls():对浏览器提供的音频控件隐藏或显示
function hideOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML= "显示";
return;
}
audio.controls = "controls";
obj.innerHTML= "隐藏"
}
可脚本控制的特性值
(1)muted():布尔类型,当它的值为true开启静音,值为false关闭静音。
function muted(obj) {
if (audio.muted){
audio.muted = false;
obj.innerHTML= "开启静音"
} else {
audio.muted = true;
obj.innerHTML= "关闭静音"
}
}
(2)vol:通过改变函数中定义的volume的值来控制音量的大小
volume范围:0.0-1.0 超出范围会报错。
function vol(type){
if(type=='up'){//加音
var volume= audio.volume+=0.1;
if(volume>=1){
volume=1;
}
audio.volume=volume;
}else{
var volume = audio.volume-=0.1;
if(volume<=0){
volume=0;
}
audio.volume=volume;
}
document.getElementById("newVol").innerHTML = round(audio.volume);
}
function round(value){
//将音量的值转化为浮点数并四舍五入
value = Math.round(parseFloat(value)*10)/10
if(value.toString().indexOf(".")<0){
value = value.toString()+".0";
}
return value;
}
2、 video
标签属性:
<video src="mov_bbb.mp4" preload="auto" loopposter="./poster.png" width="300" autoplay controls="controls"></video>
(1) src():本地视频文件的地址,也可以使用
(2) controls:由浏览器提供的视频控件
(3) preload:预加载,让文件预先进行缓冲,优化播放速度。
三个可选值:
auto 对整个视频文件进行加载,默认值。
Metadata:只加载文件的元数据(第一帧,播放总时长,播放列表等)
(4)Loop:循环播放,布尔类型在标签内使用时默认为true。
(5)Autoplay:自动播放,布尔类型在标签内使用是默认为true
(6)poster():给视频设置第一帧(封面)。括号内,写图片的路径内容
(7)width、height :设置视频的高度和宽度
常用的方法:
(1) playBySeconds():通过currentTime的值设置视频开始的位置(播放点)
function playBySeconds(){
video.currentTime= 5;
}
(2)setPlaySpeed():通过playbackRate的值设置视频播放的速度。
function setPlaySpeed(){
video.playbackRate = 0.2;
}
(3)duration():返回视频总时长
function duration(){
alert(video.duration);
}
(4) onended:当视频播放完成后触发的事件
video.onended=function(){
alert("视频播放完成")
}