目前，video支持三种视频格式，分别为Ogg、MPEG4和WebM格式；audio元素支持三种音频格式，分别为Ogg Vorbis、MP3和Wav格式。
Ogg表示带有Theora视频编码和Vorbis音频编码的Ogg文件，MPEG4表示带有H.264视频编码和ACC音频编码的MPEG4文件，WebM表示带有VP8视频编码和Vorbis音频编码的WebM文件。
1.1video/audio元素概述
这两个元素都有一个src和controls属性，其中src属性用于指定文件的地址，controls属性提供一个用于播放、暂停、音量、播放进度条、播放时间和是否全屏的控件，开始和结束标签之间的文字表示当前浏览器不支持时需要显示的内容。
在HTML5中播放音频的代码如下：
<audio src="song.ogg" controls="controls">
您的浏览器不支持audio播放。
</audio>
在HTML5中播放视频的代码如下：
<video src="movie.mp4" controls="controls">
您的浏览器不支持video播放。
</video>
PS:HTML5部分功能需要在服务器上运行。
1.2检测浏览器是否支持HTML5视频
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function checkVideo(){
if(!!document.createElement('video').canPlayType){
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora,vorbis"');
if (!oggTest)
{ h264Test=vidTest.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
if (!h264Test)
{ document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML5视频播放！";}
else{
if(h264Test=="probably"){
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持视频播放";}
else{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分播放";}
}}
else {
if(oggTest=="probably"){
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持视频播放";}
else{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分播放";
}}}
else{
document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持视频播放"
}
}
</script>
<title>检测浏览器是否支持HTML5视频</title>
</head>
<body>
<div id="checkVideoResult" style="margin:10px 0 0 0;border:0;padding:0;">
<button οnclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;" >检测</button>
</body>
</html>
1.3video元素与audio元素详解
video/audio属性
src属性：
设置音视频文件的URL地址。
autoplay属性：
设置当页面加载时，是否自动播放音视频文件。需要自动播放则添加该属性。
preload属性：
设置当页面加载时，是否对音视频文件进行预加载。preload属性有三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音视频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音视频文件。
poster属性：
该属性是video属性，设置当视频不可用时，向用户展现一副图片。
loop属性：
设置是否循环播放音视频文件。
controls属性：
设置是否添加浏览器自带的播放控制器。
width属性和height属性：
这两个属性是video元素属性，用于指定视频的宽度和高度。
muted属性：
设置当页面加载时，播放器是否被静音。如果需要静音，则添加该属性。
1.4video/audio方法
play方法：
除了播放器自己的播放功能外，用户还可以在脚本中使用play方法来控制音视频的播放功能。代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function play(){
var video=document.getElementById("MyVideo");
video.play();
}
</script>
</head>
<body>
<video id="Myvideo" src="movie.mp4" controls></video>
<button onClick="play()">play</button>
</body>
</html>
pause方法：
与play相对应的pause方法用于设置暂停播放音视频功能。代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function pause(){
var video=document.getElementById("MyVideo");
video.pause();
}
</script>
</head>
<body>
<video id="Myvideo" src="movie.mp4" controls></video>
<button onClick="pause()">pause</button>
</body>
</html>
load方法：
调用该方法可以重新加载音视频文件进行播放。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function load(){
var video=document.getElementById("MyVideo");
video.load();
}
</script>
</head>
<body>
<video id="Myvideo" src="movie.mp4" controls></video>
<button onClick="load()">load</button>
</body>
</html>
canPlayType方法：
该方法用于测试浏览器是否支持指定的类型，并返回结果。
1.5video/audio事件：
在音视频播放的整个过程中，会触发一系列的事件，捕获这些事件并加以利用，就可以实现更多的效果。
在JavaScript中捕捉事情的方式有两种，第一种是监听的方式，使用video元素或audio元素的addEventListener方法对事件进行监听，相关代码如下：
var video=document.getElementById("Myvideo");
var img=document.getElementById("MyImg");
video.addEventListener("play",function(){
img.hidden=true;
},false);
video表示页面上的video元素或audio元素，play表示监听的事件名称，在function中处理当音视频播放的时候需要执行的其他操作，img.hidden=true表示页面上一个图片被隐藏，false表示浏览器采用bubbling响应方式，如果为true则表示浏览器采用capture响应方式。
另一种捕捉事件的方法是在JavaScript脚本中获取事件句柄（事件名称前加on就是事件句柄），并对事件句柄赋值处理函数，相关代码如下：
var img=document.getElementById("Myimg");
function showImg(flag){
img.hidden=flag
}
<video id="Myvideo" src="movie.mp4" controls onPlay="showImg(true);" onPause="showImg(false);"></video>
<img id="MyImg" src="myimg.png" hidden="true"/>
文章参考《从零开始学HTML5+CSS3》胡晓霞等编著
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
