04-HTML5强大的多媒体支持（借由 video和audio）

video—最好的 HTML 解决方法

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

audio—最好的 HTML 解决方法

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

video/audio对象它们共有的一些属性和方法

属性：

1. width

2. height

3. autoplay = ‘autoplay’

4. controls = ‘controls’

5. loop = ‘loop’

6. preload = ‘preload’

7. src

8. poster = ‘1.png’

9. muted = ‘muted’ 静音属性 标签出现该属性 播放正常进行 音量为零

10. vd.currentTime 当前时间

11. vd.duration 资源总长度
    now = times.toFixed(0); //取整
    hour = Math.floor(now/3600);//获取小时
    minute =Math.floor((now/60)%60); //分
    now = now%60;//秒

12. webkitRequestFullScreen(); //全屏
    document.webkitCancelFullScreen(); //(webkit )
    document.mozCancelFullScreen(); // (Firefox)
    document.mozRequestFullScreen(); // (Firefox)

13. vd.playbackRate = 2;// 2倍播放速度

14. vd.muted = true; //静音

15. vd.volume = 0.6; //调节音量 0-1

16. vd.pause();//停止 vd.play()播放 vd.load()结束

17. vd.currentSrc; // 返回播放 的资源

18. vd.networkState;// 返回网络状态

video/audio的API事件
1、v.onloadedmetadata 源数据被加载事件，基本上都是以它开始，例：获取到video的id后，可以计算视频时间和点击开始按钮

2.v.ontimeupdate 播放位置改变事件

3.v.onvolumechange 音量改变所触发的事件