html5声频audio和视频video等新特性详细说明


Posted in HTML / CSS onDecember 26, 2012

html5作为下一代web标准,年前轩起了html5热潮。对于html5我只是本着了解看看。关于html5和RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的,存在就有其存在的理由。孰优孰劣,留给事实、时间来证明的。

在html5中出现了一些新特性
canvas 元素 视频 video 和 声频audio 元素 ;
对本地离线存储(localStorage,sessionStorage)的支持 ;
新增特殊内容元素:article、footer、header、nav、section ;
新增表单控件: calendar、date、time、email、url、search 。
今天看看视频和声频:在html5中规定了视频的标准方法:video
<video src="xxx.ogg" controls="controls">你的浏览器还不支持哦</video> 我们也可以设置多个source,浏览器会为我们选择第一个可识别的视频来播放,形如:<video width="320" height="240" controls="controls"> <source src="xxx.ogg" type="video/ogg"> <source src="xx1.mp4" type="video/mp4">你的浏览器还不支持哦</video>video属性有:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 像素 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。
src url视频地址 要播放的视频的 URL。
width 像素 设置视频播放器的宽度。
autobuffer Autobuffer (自动缓冲) 在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关API进行内容缓冲
poster url图片地址   当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来

在HTML5 规定了声频标准为 audio 元素,audio 元素能够播放声音文件或者音频流。
audio格式和video相似:直接行多source
复制代码
代码如下:

<audio controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx1.mp3" type="audio/mpeg">

你的浏览器还不支持哦
</audio>其属性比video少了height、width、poster。在我们的开发中多媒体越来越重要,html5出现了这些video和audio。
HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 #HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 #HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 #HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 #HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 #HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 #HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 #HTML / CSS
You might like
牡丹941资料
2021/03/01 无线电
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php eval函数一句话木马代码
2015/05/21 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
js+css实现全屏侧边栏
2020/06/16 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python简单商城购物车实例代码
2018/03/15 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python实现转圈打印矩阵
2019/03/02 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
小班幼儿评语大全
2014/04/30 职场文书
岗位安全生产责任书
2014/07/28 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python