音频和视频处理
为什么会有audio？或者说audio的出现时为了解决一些什么问题？
在H5之前，如果想在浏览器上播放音频和视频的话都是需要通过一些插件的支持（比如flash），但是因为浏览器和插件之间存在一些兼容性的问题，所以为了解决这些问题，H5就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法，使其可以统一化、简单化。
6.1 audio
<audio src="荣耀.mp3" preload="metadata" controls></audio>（1）src():本地音频文件的地址，也可以是网页的在线地址
（2）controls:由浏览器提供的音频控件
（3）preload：预加载，让文件预先进行一些缓冲，优化播放的速度。
三个可选值：
auto：对整个音频文件进行加载 默认值
metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）
none：
<audio src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>loop：循环播放，布尔类型 在标签内使用时默认为true；
autoplay：自动播放，布尔类型 在标签内使用时默认为true；
6.1.1 控制函数和常用属性
（1）playOrPaused()：控制音频的播放和暂停
play()：播放
pause()：暂停
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<a href="javascript:void(0);" onclick="playOrPaused('chrome',this)">暂停/播放</a>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//播放和暂停
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML = '暂停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
</script>（2）getCurrentTime()：获取已播放的时长，或者说是播放了多长
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<a href="javascript:void(0);" onclick="getCurrentTime()">获取音频的总时长</a>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//获取音频已播放的总时长
function getCurrentTime(){
alert(audio.currentTime + '秒');
}
</script>（3）duration()：获取音频的总时长
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<a href="javascript:void(0);" onclick="duration()">获取音频的总时长</a>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//获取音频的总时长
function duration(){
alert(audio.duration + "秒");
}
</script>（4）hideOrShowControls():对浏览器提供的音频控件进行隐藏或显示
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<a href="javascript:void(0);" onclick="hideOrShowControls(this)">隐藏或显示</a>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//对浏览器提供的音频控件进行隐藏或显示
function hideOrShowControls(obj){
if(audio.controls){
audio.removeAttribute("controls");
obj.innerHTML = '显示';
return;
}
audio.controls = 'controls';
obj.innerHTML = '隐藏';
}
</script>6.1.2 可脚本控制的特性值
（1）muted():布尔类型 当值为true时开启静音；值为false时关闭静音
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<a href="javascript:void(0);" onclick="muted(this)">开启/关闭静音</a>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//开启或关闭静音
function muted(obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '开启静音';
}else{
audio.muted = true;
obj.innerHTML = '关闭静音';
}
}
</script>（2）vol通过改变函数中定义的volume的值来控制音量的大小
volume范围：0.0-1.0 超出这个范围会报错
<body>
<audio id="audio" src="荣耀.mp3" autoplay loop preload="metadata" controls></audio>
<input type="button" value="+" onclick="vol('up')"/>音量
<input type="button" value="-" onclick="vol('down')"/>
当前音量：<span id="nowVol">---</span>
</body>
<script>
var audio;
window.onload = function(){
initAudio();//初始化audio
};
var initAudio = function(){
audio = document.getElementById("audio");//获取audio
};
//音量大小调节
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("nowVol").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;
}
</script>6.2 video
标签属性：
<video src="mov_bbb.mp4" loop preload="auto" poster="poster.png" width="300" height="300" controls></video>（1）src():本地音频文件的地址，也可以是网页的在线地址
（2）controls:由浏览器提供的音频控件
（3）preload：预加载，让文件预先进行一些缓冲，优化播放的速度。
三个可选值：
auto：对整个音频文件进行加载 默认值
metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）
（4）loop：循环播放，布尔类型 在标签内使用时默认为true；
（5）autoplay：自动播放，布尔类型 在标签内使用时默认为true；
（6）poster：给视频设置第一帧（封面）。括号内写图片的路径内容
（7）width、height：设置视频的高度和宽度
常用的方法：
（1）playbySeconds():通过改变currentTime的值设置视频开始播放的位置（播放点）
<body>
<video id="video" src="mov_bbb.mp4" loop preload="auto" poster="poster.png" width="600" height="600" controls></video>
<button onclick="playBySeconds()">设置播放点</button>
</body>
<script>
var video = document.getElementById("video");
function playBySeconds(){
video.currentTime = 5;
}
</script>（2）setPlaySpeed():通过改变playbackRate的值来设置视频的播放速度
<body>
<video id="video" src="mov_bbb.mp4" loop preload="auto" poster="poster.png" width="600" height="600" controls></video>
<button onclick="setPlaySpeed()">设置播放速度</button>
</body>
<script>
var video = document.getElementById("video");
function setPlaySpeed(){
video.playbackRate = 0.3;
}
</script>（3）duration():返回视频的总时长
<body>
<video id="video" src="mov_bbb.mp4" loop preload="auto" poster="poster.png" width="600" height="600" controls></video>
<button onclick="duration()">获取视频的总时长</button>
</body>
<script>
var video = document.getElementById("video");
function duration(){
alert(video.duration);
}
</script>（4）onended：当视频播放完成后触发的事件
video.onended = function(){
alert("视频播放完成");
}
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
