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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
document.createElement()用法
2013/03/13 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
教你用Python写安卓游戏外挂
2018/01/11 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python类super()及私有属性原理解析
2020/06/15 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
校园文明倡议书
2014/05/16 职场文书
负责人任命书范本
2014/06/04 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书