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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
POST提交数据常见的四种方式
Jan 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
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
银行自荐信范文
2013/10/07 职场文书
环保小标语
2014/06/13 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
java基础——多线程
2021/07/03 Java/Android
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
nginx共享内存的机制详解
2022/03/21 Servers