前 言
现在网上有许多的框架和插件，能够满足程序猿的各种需求，慢慢的，就有些忽视最基础的东西。比如，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
所以，今天影子向大家介绍的，就是HTML5对音视频的处理。
| 一、 优势 |
1 关于视频不用插件播放，点击就能看
2 跨平台、好升级、好维护，开发成本相对原生APP低很多
3 对移动的良好支持，支持手势，本地存储和视频续播等，通过H5就可以把自己的网站移动化。
4 更为简洁的代码，更好的交互
5 支持游戏开发
| 二、 兼容性 |
<video id="video"> ???<source src="movie/chenai.mp4"></source> ????您的浏览器不支持 HTML5 video 标签。</video> ???????
注释：
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
即，如果，浏览器不支持，则会显示" 您的浏览器不支持 HTML5 video 标签。 "。
| 三、 两种方式 |
????????????????// 方式一 ???????<video src="movie/chenai.mp4h"loop="loop"></video> ???????// 方式二 ???<video width="320" height="240"> ??????<source src="movie/chenai.mp4"></source> ???</video> ???????
注释：
<video> 元素元素提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
| 四、video标签的新增属性 |
1、controls：给视频添加播放控件。如：开始。暂停
2、autoplay：视频就绪后马上播放
3、loop：表示循环播放
4、muted：表示视屏静音输出
| 五、 用于操作DOM的方法和属性 |
5.1用于操作DOM的方法
1、play():表示视频播放
2、pause():表示视频暂停
5.2用于操作DOM的属性
1、paused：设置或返回音视频是否被暂停
2、autoplay：设置或返回音视频加载完之后是否立即播放
3、controls：设置或返回音视频是否添加控件
4、duration：获取音视频的总时间，单位：秒
5、currentTime：获取当前播放时间
6、defaultMuted：设置音视频是否静音输出 true -- 静音 默认false，不静音
7、muted：设置或返回当前播放音视频是否是静音输出。true -- 静音 false --- 不是静音
8、playbackRate：设置音视频播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
9、loop：设置是否循环播放。true -- 循环播放 false -- 不循环播放
10、volume：设置或返回音视频的音量。介于1~0之间的数
11、ended：返回音视频是否播放结束。false -- 未结束 true -- 已结束
| 六、 实例 |
6.1内代码
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????video{ ???????????????width: 600px; ???????????????height:500px; ???????????} ???????</style> ???</head> ???<body> ???????????<!--<video src="movie/chenai.mp4h"loop="loop"></video>--> ???????<video id="video"> ???????????<source src="movie/chenai.mp4"></source> ?????????????您的浏览器不支持 HTML5 video 标签。 ???????</video> ???????????????<br /> ???????<button onclick="bofang()">点击播放/暂停</button> ???????<button onclick="timeAll()">点击获取总时间 </button> ???????<button onclick="timeBf()">点击获取当前时间 </button> ???????<button onclick="jingyin()">点击静音 </button> ???????<button onclick="yinliang()">点击获取音量 </button> ???????<button onclick="end()">是否播放结束 </button> ???</body> ???<script type="text/javascript"> ???????????????????????var video = document.getElementById("video"); ???????????????//点击播放或暂停 ???????function bofang(){ ???????????if (video.paused) {//播放状态:是否暂停 ???????????????video.play(); ???????????}else video.pause(); ???????} ???????video.autoplay = true; ???????video.controls = false; ???????????????function timeAll(){ ???????????alert(video.duration); // -- 音视频的总时间 ???????} ???????????????function timeBf(){ ???????????alert(video.currentTime);// -- 当前时间 ???????} ???????????????video.defaultMuted = false; ???????????????????????function jingyin(){ ???????????if (video.muted == false) video.muted = true; ???????????else video.muted = false; ???????} ???????????????video.playbackRate = 1.0; ?// -- 改变播放速度 ???????video.loop = true; ???????// -- 是否循环播放 ???????????????function yinliang(){ ???????????????????????video.volume = 0.5; ???????????alert(video.volume); ???????} ???????????????function end(){ ???????????alert(video.ended); ???????} ???</script></html>6.2效果
今天，影子主要是分享的对视屏的处理，那是因为，音频的处理只是换成了audio便签而已，所以，影子就不多啰嗦了。相信大家也是理解的。
HTML5对音视频的处理
原文地址：http://www.cnblogs.com/2502778498spw/p/7821990.html