html5学习-video audio标签
2011-12-15 17:24 walker石 阅读(755) 评论(0) 编辑 收藏 举报在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。
vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人介绍的vedio标签
大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。
不幸的是，视频并非那么简单。不仅仅是浏览器需要理解<video>标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。
总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。 面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码解码器。”好吧，引用到这儿。 如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML 5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。 苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。 说了这么多，其实说到底就是，现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。
我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。
使用方法：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
各浏览器目前对html5视频格式的支持：
| 浏览器 | 影音格式 | Ogg Theora | MP4(H.264) | WebM |
|---|---|---|---|
| Microsoft Internet Explorer9 | × | √ | × |
| Mozilla Firefox5+ | √ | × | √ |
| Google Chrome13+ | √ | √ | √ |
| Apple Safari5+ | × | √ | × |
| Opera11+ | √ | × | √ |
属性列表：
|
属性 |
值 |
描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。默认为false |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。这些控件是由浏览器来提供的，样式也可能因为不同浏览器而不一样 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | none、metadata、auto |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
|
| src | url | 要播放的视频的URL。 |
| poster | url | 预览图 |
媒介属性
一般用于js操作
| 属性 | 可读状态 | 描述 |
| error | 只读 |
使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null，共有4个可能值。
|
| currentSrc | 只读 | 返回该媒介标签的src属性值 |
| networkState | 只读 | 返回媒介的网络状态，共有4个可能值。
|
| preload | 可读写 | 可获取或改变媒介标签的preload属性值 |
| buffered | 只读 | 返回一个TimeRanges对象，确认浏览器已缓存媒介文件 |
| readyState | 只读 |
返回媒介当前播放位置的就绪状态，共有5个可能值。
|
| seeking | 只读 | 返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。 |
| seekable | 只读 | 发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。 |
| currentTime | 可读写 | 获取或改变视频的播放位置。单位为秒 |
| startTime | 只读 | 返回媒介文件播放的开始时间，通常为0 |
| duration | 只读 | 返回媒介文件总的播放时长 |
| played | 只读 | 返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围 |
| paused | 只读 | 返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。 |
| ended | 只读 | 返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。 |
| defaultPlaybackRate | 可读写 | 返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。 |
| playbackRate | 可读写 | 返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率 |
| autoplay | 可读写 | 返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。 |
| loop | 可读写 | 返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。 |
| controls | 可读写 | 返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏 |
| volume | 可读写 | 返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。 |
| muted | 可读写 | 返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。 |
很简单，那我们来做一个demo。(很奇怪，chrome拖动进度条到最后视频有几率就死掉，自动播放到最后没有问题，这是bug？还是我自己的问题？)
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>html5 视频标签学习</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
</head>
<body>
<header>
<h1>自定义视频播放器</h1>
<div >
当前播放 ：《<span id="currentMovie">movie1</span>》<br>
当前播放速度 ： <span id="currentSpeed">1X</span><br>
当前声音大小为 ：<span id="currentVolume">100</span><br>
</div>
</header>
<section>
<article>
<video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300" controls>
你的浏览器不支持html5视频
</video>
<div style="float:left;margin-left:10px;">
<h3>播放列表</h3>
<ul>
<li><a>movie1</a></li>
<li><a>movie2</a></li>
<li><a>movie3</a></li>
<li><a>movie4</a></li>
</ul>
</div>
</article>
<article style="clear:both;">
<br/>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="stop">停止</button>
<button id="prev">前一个</button>
<button id="next">后一个</button>
<button id="upVolume">音量+</button>
<button id="downVolume">音量-</button>
<button id="fastFoward">快进</button>
<button id="fastBackward">快退</button>
<br/>
从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec" style="width:20px;" value="0"/>播放
<button id="locate">确认</button>
</article>
<section>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id);};
var _video = $("testVideo");
//视频列表
var playList = {
current : 0,
list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
}
var videoUtil = {
//播放
play : function(){
_video.play();
},
//暂停
pause : function(){
_video.pause();
},
//停止
stop : function(){
_video.currentTime = 0;
_video.pause();
},
//下一个视频
next : function(){
if(playList.current == playList.list.length-1){
playList.current = 0;
}else{
playList.current++;
}
_video.src=playList.list[playList.current];
_video.play();
},
//前一个视频
prev : function(){
if(playList.current == 0){
playList.current = palyList.list.length-1;
}else{
playList.current--;
}
_video.src=playList.list[playList.current];
_video.play();
},
//加大声音,每次加大1/10
upVolume : function(){
_video.volume += 0.1;
},
//减小声音，每次减小1/10
downVolume : function(){
_video.volume -= 0.1;
},
//翻倍加快播放速度
fastFoward : function(){
//FF不支持playbackRate
if(_video.playbackRate){
_video.playbackRate = _video.playbackRate*2;
}else{
alert("对不起，你的浏览器不支持改变播放速度！");
}
},
//降低播放速度
fastBackward : function(){
if(_video.playbackRate){
_video.playbackRate = _video.playbackRate/2;
}else{
alert("对不起，你的浏览器不支持改变播放速度！");
}
},
//跳转到指定时间点播放
locate : function(){
var min = $("min").value;
var sec = $("sec").value;
var time = parseInt(min)*60+parseInt(sec);
_video.currentTime = time;
_video.play();
},
bindEvent : function(){
var self = this;
//绑定页面上各个按钮的事件
var btns = document.getElementsByTagName("button");
for(var i = 0 ;i < btns.length ; i++){
var el = btns[i];
el.onclick = self[el.id];
}
//播放完毕自动播放下一个
_video.onended = function(){
var event = document.createEvent("HTMLEvents");
event.initEvent('click', true, true);
$("next").dispatchEvent(event);
}
//循环检查视频的当前状态
setInterval(function(){
var speed = _video.playbackRate||1;
var movie = "movie"+playList.current;
var volume = parseInt(_video.volume*100);
$("currentMovie").innerHTML = movie;
$("currentSpeed").innerHTML = speed+"X";
$("currentVolume").innerHTML = volume;
},200);
}
};
window.onload = function(){
videoUtil.bindEvent();
}
</script>
</body>
</html>
