HTML5笔记2——HTML5音/视频标签详解
音视频的发展史
早期:<embed>+<object>+文件
问题:不是所有浏览器都支持,而且embed不是标准。
现状:Realplay、window media、Quick Time 、Flash
问题:每个厂商每个标准,网站编码和格式也都不相同,flash的出现解决了面的问题,但是apple在07年决定任何设备将不再支持flash。而安卓也在4.0版本之后不再支持Flash,
因为Flash很占内存。
HTML5认为浏览器应该原生支持音视频,因为他们现在也是web中的一等公民了!
视频格式的简单介绍
常见的视频格式
视频的组成部分:画面、音频、编码格式
视频编码:H.264、Theora、VP8(google开源)
其中H.264是收费的。
常见的音频格式
视频编码:ACC、MP3、Vorbis
其中ACC、MP3是收费的。
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。
HTML5支持的视频格式:
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
注:各浏览器简写(F:火狐 、C:谷歌 、O:opera、 I:IE 、 S:safari(苹果))
因为H.264是收费的,那么MEPG4同样也是收费的,MEPG4就是我们常说的MP4。MP4是一种很古老的视频格式了,用过MP4的小伙伴应该知道。MP4各方面的技术也非常成熟,唯一不好的地方就是收费。
<Video>的使用
第一种
<video src="文件地址" controls="controls"></video>
此种方式,在不支持HTML5相关视频格式的浏览器中显示为空白,这很不友好。
第二种
<video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</video>
此方式将在不支持HTML5相关视频格式的浏览器中显示自定义的文字。若支持HTML5则显示结果和第一种一样。
第三种
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</video>
此种方式可以让浏览器来选择支持的视频格式进行播放,如上,如果ogg格式支持,则播放ogg视频,如果ogg不支持,则判断mp4是否支持,如果MP4支持,则播放mp4格式视频。如果mp4格式也不支持,则显示自定义文本。
Video的常见属性
属性 |
值 |
描述 |
Autoplay |
Autoplay |
视频就绪自动播放 |
controls |
controls |
向用户显示播放控件 |
Width |
Pixels(像素) |
设置播放器宽度 |
Height |
Pixels(像素) |
设置播放器高度 |
Loop |
Loop |
播放完是否继续播放该视频,循环播放 |
Preload |
Proload |
是否等加载完再播放 |
Src |
url |
视频url地址 |
Poster |
Imgurl |
加载等待的画面图片 |
Autobuffer |
Autobuffer |
设置为浏览器缓冲方式,不设置Autoplay才有效 |
Video的API方法
方法 |
属性 |
事件 |
play() |
currentSrc |
play |
pause() |
currentTime |
pause |
load() |
videoWidth |
progress |
canPlayType |
videoHeight |
error |
全屏操作
全屏 |
退出全屏 |
|
Webkit (Safari5.1 /Chrome 15) |
element.webkitRequestFullScreen(); |
document.webkitCancelFullScreen(); |
Firefox (works in nightly) |
element.mozRequestFullScreen(); |
document.mozCancelFullScreen(); |
W3C 提议 |
element.requestFullscreen(); |
document.exitFullscreen(); |
Video的API属性
属性 |
说明 |
audioTracks |
返回可用的音轨列表(MultipleTrackList对象) |
autoplay |
媒体加载后自动播放 |
buffered |
返回缓冲部件的时间范围(TimeRanges对象) |
controller |
返回当前的媒体控制器(MediaController对象) |
controls |
显示播控控件 |
crossOrigin |
CORS设置 |
currentSrc |
返回当前媒体的URL |
currentTime |
当前播放的时间,单位秒 (快进快退10秒) |
defaultMuted |
缺省是否静音 |
defaultPlaybackRate |
播控的缺省倍速(正数表示加速,负数表示减速) |
duration |
返回媒体的播放总时长,单位秒 |
ended |
返回当前播放是否结束标志 |
error |
返回当前播放的错误状态 |
initialTime |
返回初始播放的位置 |
loop |
是否循环播放 |
mediaGroup |
当前音视频所属媒体组 (用来链接多个音视频标签) |
muted |
是否静音 |
networkState |
返回当前网络状态 |
paused |
是否暂停 |
playbackRate |
播放的倍速(加速、减速播放) |
played |
当前播放部件已经播放的时间范围(TimeRanges对象) |
preload |
页面加载时是否同时加载音视频 |
readyState |
返回当前的准备状态 |
seekable |
返回当前可跳转部件的时间范围(TimeRanges对象) |
seeking |
返回用户是否做了跳转操作 |
src |
当前音视频源的URL |
startOffsetTime |
返回当前的时间偏移(Date对象) |
textTracks |
返回可用的文本轨迹(TextTrackList对象) |
videoTracks |
返回可用的视频轨迹(VideoTrackList对象) |
volume |
音量值(0~1之间) |
Video的常用事件
事件 |
描述 |
abort |
当音视频加载被异常终止时产生该事件 |
canplay |
当浏览器可以开始播放该音视频时产生该事件 |
canplaythrough |
当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
durationchange |
当媒体的总时长改变时产生该事件 |
emptied |
当前播放列表为空时产生该事件 |
ended |
当前播放列表结束时产生该事件 |
error |
当加载媒体发生错误时产生该事件 |
loadeddata |
当加载媒体数据时产生该事件 |
loadedmetadata |
当收到总时长,分辨率和字轨等metadata时产生该事件 |
loadstart |
当开始查找媒体数据时产生该事件 |
pause |
当媒体暂停时产生该事件 |
play |
当媒体播放时产生该事件 |
playing |
当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
progress |
当获取到媒体数据时产生该事件 |
ratechange |
当播放倍数改变时产生该事件 |
seeked |
当用户完成跳转时产生该事件 |
seeking |
当用户正执行跳转时操作的时候产生该事件 |
stalled |
当试图获取媒体数据,但数据还不可用时产生该事件 |
suspend |
当获取不到数据时产生该事件 |
timeupdate |
当前播放位置发生改变时产生该事件 |
volumechange |
当前音量发生改变时产生该事件 |
waiting |
当视频因缓冲下一帧而停止时产生该事件 |
HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
<audio>的使用
同样支持三中方式
方式一
<audio src="文件地址" controls="controls"></audio>
方式二
<audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</video>
方式三
<audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</audio>
audio的常见属性
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
preload |
preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src |
url |
要播放的音频的 URL。 |
Demo,这里我用的是FF浏览器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="background-color:lightblue;">
<input type="button" value="播放" onclick="play();" />
<input type="button" value="暂停" onclick="pause();"/>
<input type="button" value="全屏" onclick="requestFullscreen();"/>
<input type="button" value="退出全屏" onclick="exitFullscreen()"/>
<input type="button" value="快进" onclick="speed()"/>
<input type="button" value="快退" onclick="back()" />
<input type="button" value="加速" onclick="speedUp()" />
<input type="button" value="减速" onclick="speedDown()" />
<input type="button" value="正常" onclick="speedNormal()" />
<input type="button" value="调高音量" onclick="upper()" />
<input type="button" value="降低音量" onclick="lower()" />
</div>
<video id="video" src="/video/多情侠客 郑少秋 140120_高清.mp4" controls="controls" width="600" height="500" poster="/img/zsq.png">
您的浏览器暂不支持video标签播放视频
</video>
<script type="text/javascript">
var video = document.getElementById("video");
//播放
function play() {
video.play();
}
//暂停
function pause() {
video.pause();
}
//全屏
function requestFullscreen() {
video.mozRequestFullScreen();
}
//退出全屏
function exitFullscreen() {
video.mozCancelFullScreen();
}
//快进
function speed() {
video.currentTime += 10; //快进10秒
}
//快退
function back() {
video.currentTime -= 10;//快退10秒
}
//加速
function speedUp() {
video.playbackRate = 2; //加速播放(2倍速度)
}
//减速
function speedDown() {
video.playbackRate = 1 / 2;//慢速播放(慢2倍)
}
//正常播放
function speedNormal() {
video.playbackRate = 1;//默认的播放倍速是1
}
//调高声音
function upper() {
video.volume += 0.1;//声音值的范围是0-1
}
//调低声音
function lower() {
video.volume -= 0.1;
}
</script>
</body>
</html>
运行效果如下:
音频Demo,用法和video相似。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
音频标签的使用<br />
<audio src="/audio/逃跑计划 - 夜空中最亮的星.mp3" controls="controls">
您的浏览器该升级了,赶紧换了吧,便于欣赏中国好声音。
</audio>
</body>
</html>
HTML5笔记2——HTML5音/视频标签详解的更多相关文章
- HTML5音/视频标签详解
一.发展历: 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Qu ...
- HTML5有语义的内联元素详解
HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...
- HTML5_音视频标签 <audio> 和 <video>
HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...
- html常用标签详解
html常用标签详解 一.总结 一句话总结: 这些资料没必要自己总结,可以直接网上找,简单方便,再根据需求改一下 二.HTML常用标签详解 转自或参考:HTML常用标签详解https://blog.c ...
- 引用 struts2标签详解 - wo的的日志 - 网易博客
引用 元元 的 struts2标签详解 引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...
- embed标签详解
HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等, Net ...
- 【转载】html中object标签详解
[转载自http://blog.csdn.net/soliy/archive/2010/03/22/5404183.aspx] html标签之Object标签详解 作者:网络 出处:网络 ...
- Meta标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
- 网页设计:Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
随机推荐
- 【探索】无形验证码 —— PoW 算力验证
先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...
- JavaScript的继承实现方式
1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...
- pt-heartbeat
pt-heartbeat是用来监测主从延迟的情况的,众所周知,传统的通过show slave status\G命令中的Seconds_Behind_Master值来判断主从延迟并不靠谱. pt-hea ...
- 从display:run-in;中学习新技能
有时我们想在一行内显示一个标题,以及一段内容,虽然看起来比较简单,但是为了语义化用dl比较合适,但是它默认是block元素,改成inline?那么有多段呢?不就都跑上来了?用float?那问题也挺多. ...
- sql 删除表中的重复记录
嗯,遇见了表中存在重复的记录的问题,直接写sql删除时最快的,才不要慢慢的复制到excel表中慢慢的人工找呢.哼. 如下sql,找出重复的记录,和重复记录中ID值最小的记录(表中ID为自增长) sel ...
- Python学习基础
1.使用范围: 大数据 .图像处理.web .运维.爬虫.自动化.科学计算 2.准备环境: linux/mac python 3.5.2 ipython vim/sublime/atom 3.列表 3 ...
- Linux虚拟化学习笔记<一>
关于虚拟化,原理的东西是非常复杂的,要想完全理解,没有足够的耐心是不不能完全学透这部分内容的.那下面我主要以资源汇总的形式把一些资料罗列出来,帮助大家快速理解虚拟化,快速使用和配置. 为什么要虚拟化: ...
- Performance Tuning
本文译自Wikipedia的Performance tuning词条,原词条中的不少链接和扩展内容非常值得一读,翻译过程中暴露了个人工程学思想和英语水平的不足,翻译后的内容也失去很多准确性和丰富性,需 ...
- C++常考面试题汇总
c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...
- 巧用 mask-image 实现简单进度加载界面
最近给 nzoo 折腾官网,拿 angular2.0 + webpack 实现SPA,然后觉得最终打包后的出口文件有点大,用户首次访问会有一个时间较长的白屏等候界面,感觉体验不太好. 于是希望在用户下 ...