6音频和视频处理
如果想在浏览器上播放视频和音频都是需要通过一些插件的支持(flash)
但是因为浏览器和插件之间存在一些兼容性问题,所以
为了解决这些问题,就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法,使其可以统一化,简便化
1.Audio
<audio src="../files/荣耀.mp3" preload="metadata" controls="controls"></audio>
1.src():本地音频文件的地址
2.controls:由浏览器提供的音频控件。
3.Proload:预加载,让文件预先缓冲,优化播放的速度
可选值:auto:对整个音频文件进行加载(默认值)
Metadata:只加载文件的源数据(第一帧,播放的总时长,播放列表,不能进行快进)
None:取消默认值
<audio src="../files/荣耀.mp3" autoplay loop preload="auto" controls="controls"></audio>
Loop:循环播放,布尔类型,在标签内使用时默认为true,
Autoplay:自动播放,布尔类型,默认为true
1.1:控制函数和常用属性:
1.playOrpaused():控制音频的播放和暂停
由两种方法组成
Play()--播放
paused()暂停
var audio;
window.οnlοad=function(){
initAuto()//初始化audio
};
var initAuto = function(){
audio = document.getElementById("audio")//获取audio
};
function playOrpaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML = "暂停";
return ;
}
audio.pause();
obj.innerHTML = "播放";
}
2.当前播放时长(单位:秒)
audio.currentTime
3.获取音频总时长
audio.duration
4.隐藏/显示播放控件
function hiddenOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML = '显示';
return;
}
audio.controls = "controls";
obj.innerHTML = '隐藏';
}
5.可脚本控制的特性值
1.开启或关闭静音
布尔类型,当值为true时,开启静音,值为false时,关闭静音。
function muted(obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = "开启静音"
}else{
audio.muted = true;
obj.innerHTML = "关闭静音"
}
}
注意:以上函数当被调用时参数为this,否则会报错。
2.vol:通过改变函数中定义的volume的值来控制音量的大小,
Volume的取值范围:[0,1],超出这个范围就会报错,不过我们可以使用try{ }catch(){ }把这个错误抛出异常。
视频:
标签属性:
有些是和音频具有相同的功能属性
不同;
新属性:
Poster:给视频设置第一帧,也就是封面,括号内是文件的路径
也可以给视频设置width和height:高度和宽度
如果想在浏览器上播放视频和音频都是需要通过一些插件的支持(flash)
但是因为浏览器和插件之间存在一些兼容性问题,所以
为了解决这些问题,就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法,使其可以统一化,简便化
1.Audio
<audio src="../files/荣耀.mp3" preload="metadata" controls="controls"></audio>
1.src():本地音频文件的地址
2.controls:由浏览器提供的音频控件。
3.Proload:预加载,让文件预先缓冲,优化播放的速度
可选值:auto:对整个音频文件进行加载(默认值)
Metadata:只加载文件的源数据(第一帧,播放的总时长,播放列表,不能进行快进)
None:取消默认值
<audio src="../files/荣耀.mp3" autoplay loop preload="auto" controls="controls"></audio>
Loop:循环播放,布尔类型,在标签内使用时默认为true,
Autoplay:自动播放,布尔类型,默认为true
1.1:控制函数和常用属性:
1.playOrpaused():控制音频的播放和暂停
由两种方法组成
Play()--播放
paused()暂停
var audio;
window.οnlοad=function(){
initAuto()//初始化audio
};
var initAuto = function(){
audio = document.getElementById("audio")//获取audio
};
function playOrpaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML = "暂停";
return ;
}
audio.pause();
obj.innerHTML = "播放";
}
2.当前播放时长(单位:秒)
audio.currentTime
3.获取音频总时长
audio.duration
4.隐藏/显示播放控件
function hiddenOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML = '显示';
return;
}
audio.controls = "controls";
obj.innerHTML = '隐藏';
}
5.可脚本控制的特性值
1.开启或关闭静音
布尔类型,当值为true时,开启静音,值为false时,关闭静音。
function muted(obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = "开启静音"
}else{
audio.muted = true;
obj.innerHTML = "关闭静音"
}
}
注意:以上函数当被调用时参数为this,否则会报错。
2.vol:通过改变函数中定义的volume的值来控制音量的大小,
Volume的取值范围:[0,1],超出这个范围就会报错,不过我们可以使用try{ }catch(){ }把这个错误抛出异常。
视频:
标签属性:
有些是和音频具有相同的功能属性
不同;
新属性:
Poster:给视频设置第一帧,也就是封面,括号内是文件的路径
也可以给视频设置width和height:高度和宽度
<video width="600px" height="150px" src="../files/mov_bbb.mp4" preload="auto" loop poster="../files/poster.png" controls="controls"></video>
2.视频开始播放的位置(播放点);
var video = document.getElementById("video");
function playBySeconds(){
video.currentTime = 5;
}
3.设置播放速度
function setPlaySpeed(){
video.playbackRate = 0.5;
}
通过改变playbadRate的值来设置
3.返回视频的总时长:
function duration(){
alert(video.duration)
}
4.onended:当视频播放完成之后出发的事件;
video.onended = function(){
alert("视频播放完成");
}
2.视频开始播放的位置(播放点);
var video = document.getElementById("video");
function playBySeconds(){
video.currentTime = 5;
}
3.设置播放速度
function setPlaySpeed(){
video.playbackRate = 0.5;
}
通过改变playbadRate的值来设置
3.返回视频的总时长:
function duration(){
alert(video.duration)
}
4.onended:当视频播放完成之后出发的事件;
video.onended = function(){
alert("视频播放完成");
}
ok ,视频和音频的分享就此结束,如果有兴趣的小伙伴可以自己做一个播放器了。
要相信自己哦!!!