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 08 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
娱乐节目策划方案
2014/06/10 职场文书
单位单身证明样本
2014/10/11 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
施工员岗位职责
2015/02/10 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript