html5已经为我们提供了音频和视频的控制让我们不必在依赖于Flash。本次我将为大家讲解html5的音频和视频操作以及利用工具对音频和视频进行编码操作以适应不同的浏览器使用不同的音频视频文件。好的，进入我们的正题。开饭。。。。
html5的音频Audio
html5规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定。
1.audio标签属性
src:音乐的URL
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
2.控制函数功能说明
load(): 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载。
play() : 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放。
pause() :暂停处于播放状态的音频、视频文件。
canPlayType():检测浏览器是否能播放指定的音频/视频类型
addTextTrack():向音频/视频添加新的文本轨道
3.只读属性属性说明
duration :获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN。
paused :如果媒体文件被暂停，则返回true，否则返回false。
ended :如果媒体文件播放完毕，则返回true。
startTime :返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区。
error : 在发生了错误后返回的错误代码。
currentSrc : 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件。
4.可脚本控制的特性值
autoplay:自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
loop:将媒体文件设置为循环播放，或查询是否已设置为loop
currentTime:以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls: 显示或者隐藏用户控制界面
volume:在0.0到1.0间设置音量值,或查询当前音量值
muted:设置是否静音
autobuffer:媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性
注意:对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="薛之谦 - 刚刚好.mp3" id="audio" controls="controls" ></audio>
当前音量：<span id = "nowVol"> - </span>
</body>
<script>
var audio ;
window.onload = function(){
initAudio();
}
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
}
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + '：秒');
}
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暂停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = '显示控制框'
return;
}
audio.controls = 'controls';
obj.innerHTML = '隐藏控制框'
return;
}
function vol(id,type , obj){
if(type == 'up'){
var volume = audio.volume + 0.1;
if(volume >=1 ){
volume = 1 ;
}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume <=0 ){
volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '开启静音';
}else{
audio.muted = true;
obj.innerHTML = '关闭静音';
}
}
//保留一位小数点
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}
</script>
</html>
效果：
有时候我们为了解决兼容性问题会和<source>标签配合使用，<source>标签可以有多个，当浏览器不支持的时候会往下执行，找寻一个可以执行的，如果没有则显示默认的效果。代码如下：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
html5的视频video
<video> 标签定义视频，比如电影片段或其他视频流。
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
1.video的标签属性
src:视频的URL
poster:视频封面，没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
2.video的控制函数
load(): 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载。
play() : 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放。
pause() :暂停处于播放状态的音频、视频文件。
canPlayType():检测浏览器是否能播放指定的音频/视频类型
addTextTrack():向音频/视频添加新的文本轨道
3.video的常用属性
currentSrc:返回当前音频/视频的 URL
currentTime:设置或返回音频/视频中的当前播放位置（以秒计）
duration:返回当前音频/视频的长度（以秒计）
ended:返回音频/视频的播放是否已结束
error:返回表示音频/视频错误状态的 MediaError 对象
paused:设置或返回音频/视频是否暂停
muted:设置或返回音频/视频是否静音
seeking:返回用户是否正在音频/视频中进行查找
volume:设置或返回音频/视频的音量
height: 返回当前视频的高度
width:返回当前视频的宽度
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
3.video的常用监听事件
onabort:在退出时运行的脚本。
oncanplay:当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough:当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange:当媒介长度改变时运行的脚本。
onemptied:当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended:当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror:当在文件加载期间发生错误时运行的脚本。
onloadeddata:当媒介数据已加载时运行的脚本。
onloadedmetadata:当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart:在文件开始加载且未实际加载任何数据前运行的脚本。
onpause:当媒介被用户或程序暂停时运行的脚本。
onplay:当媒介已就绪可以开始播放时运行的脚本。
onplaying:当媒介已开始播放时运行的脚本。
onprogress:当浏览器正在获取媒介数据时运行的脚本。
onratechange:每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange:每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked:当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking:当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled:在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend:在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate:当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange:每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting:当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<script>
//获取video元素
var myVideo = document.getElementById('myVideo'),tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});
//播放
function play(){
myVideo.play();
}
//暂停
function pause(){
myVideo.pause();
}
//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});
//设置播放点
function playBySeconds(num){
myVideo.currentTime = num;
}
//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});
//设置音量
function setVol(num){
myVideo.volume = num;
}
//放大
function makeBig()
{
myVideo.width=560;
}
//缩小
function makeSmall()
{
myVideo.width=320;
}
//恢复
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
效果：
video也可以使用<source>标签进行兼容性调试。代码如下：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
编解码工具FFmpeg
FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多code都是从头开发的。
ffmpeg官网下载windows版本。本文写作时只是直接下载了已经编译好的ffmpeg.exe来进行相关操作，没有涉及到ffmpeg在windows下的编
译。首先在D盘创建ffmpeg目录，将下载好的ffmpeg.exe文件拖入该文件夹中，并放入测试视频1.mov。
进入 cmd ，输入 D: 进入d盘 ，
输入 cd ffmpeg 进入 ffmpeg 目录
输入 ffmpeg.exe -i D:\ffmpeg\1.mov -ar 44100 -r 29.97 -s 1280x720 D:\ffmpeg\1.mp4 即可完成转换。
转换需要一定的时间。
详细教程请参照：FFmpeg快速入门
感谢大家的观看，学习在于练习，希望大家多多练习！一起加油
