audio播放音频

<audio src="resource.mp3" controls ></audio>
controls:显示播放控件
preload： auto（下载整个文件）/metadata（现获取音频文件开头的数据块，足以确定一些基本的信息）/none（不预先下载）
autoplay：自动播放
loop: 播完之后重新开始

video播放视频

<video src="resource.mp4" controls poster="resouce_thumbnail.jpg"></video>
同样的有controls、preload、autoplay、loop等属性
此外还有height和width用于设置视频窗口大小的属性
poster顾名思义就是用于替换视频的图片，这个会在视频没有加载的情况下被浏览器使用

HTML5视频音频编码格式，目前主流浏览器并没有统一标准。

Chrome支持 Google自己主导的Webm开放格式(.webm)，Ogg开放格式(.ogg)，和H.264商业格式(.mp4).

Firefox支持 Webm开放格式(.webm)，Ogg开放格式(.ogg)。并不支持 H.264 

IE只支持 H.264,并不支持其他任何开放格式。

在当前的情况下，为了尽量在每一款浏览器上都能正常显示，可以考虑一个后备情况，采用<source>元素以及以flash作为后备

<video controls width="704" height="400">

  <source src="beach.mp4" type="video/mp4">

  <source src="beach.ogv" type="video/ogg">

  <object id="flowplayer" width="704" height="400"

   data="flowplayer-3.2.7.swf" 

   type="application/x-shockwave-flash">

    <param name="movie" value="flowplayer-3.2.7.swf" /> 

    <param name="flashvars" value='config={"clip":"http://reboot-me.com/beach.mp4"}' />

        <img src="houbei.jpg" alt="替代视频的图片">

        <p>你的浏览器不支持HTML5视频以及Flash</p>

        <p>你可以下载视频观看，<a href='beach.mp4'>mp4格式</a>或者<a href='beach.ogv'>ogv格式</a></p>

  </object>

</video>

在这段代码里面，source元素扮演的是可供浏览器选择的视频源，浏览器会播放第一个它所支持的文件。有个小技巧是将mp3或mp4格式的source标签放在最前面以免IOS3.X的浏览器出现错误

由于不识别video标签的浏览器还大量存在，因此在<video>标签里面添加后备就是很必要的。一种是可以采用下面的文字提示的方式，另一种就是上面蓝色部分的用flash视频播放器

<video controls width="704" height="400">

  <source src="beach.mp4" type="video/mp4">

  <source src="beach.ogv" type="video/ogg">

  <p>你的浏览器不支持HTML5视频，请升级！</p>

</video>

更可恶的是还有连flash都没有装的浏览器，这样岂不是只有用图片作为后备了，这种情况下就使用上方红色部分的代码实现吧

添加音效

play()和pause()可以控制音视频对象的播放和暂停

有意思的例子：http://www.prosetech.com/html5/Chapter%2005/SoundEffects.html

这里面有背景音乐，还会在每一个小球与地面碰撞的时候调用下面的boing()方法播放特殊音效

var audioElementCount = 3;

var audioElementIndex = 1;

function boing() {

  // Rollover to the next <audio> element in the sequence.

  var audioElementName = "audio" + audioElementIndex;

  var audio = document.getElementById(audioElementName);

  audio.currentTime = 0;

  audio.play();

  if (audioElementIndex == audioElementCount) {

    audioElementIndex = 1;

  }

  else {

    audioElementIndex += 1;

  }

}

对于使用javascript添加音视频可以采用下面的方法判断浏览器是否支持然后再处理

var audio=document.createElement("audio");

if(audio.canPlayType("audio/ogg")){

    audio.src="newSound.ogg"

}else if(audio.canPlayType("audio/mp3")){

    audio.src="newSound.mp3"

}

创建自定义视频播放器

http://www.prosetech.com/html5/Chapter%2005/UglyPlayer.html

video.playbackRate()=2  //设置两倍速度播放

video.playbackRate()=0.5  //设置慢速度播放

进度条使用两个嵌套的DIV实现的 （其实可以使用<progress>,但是因为支持这个标签的浏览器太少了）

function progressUpdate() {

    var positionBar = document.getElementById("positionBar");

    positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";

    displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";

}

 <video id="videoPlayer" ontimeupdate="progressUpdate()">

    <source src="butterfly.mp4" type="video/mp4">

    <source src="butterfly.ogv" type="video/ogg">

  </video>

有现成的HTML5播放器可以选择。比如jPlayer（http://www.jplayer.org/）和VideoJS（http://www.videojs.com/）

使用VideoJS，先下载Javascript文件，然后在head中引用js和css 

<script src="video.js"></script>

<link rel="stylesheet" href="video-js.css">

然后使用使用平常的方式，唯一不同的是需要用一个特殊的div元素包装video元素

<div class="video-js-box">

<video class="video-js" id="videoPlayer" width="640" height="300" controls ……>

    <source src="butterfly.mp4" type="video/mp4">

    <source src="butterfly.ogv" type="video/ogg">

  </video>

</div>