So Beautiful 旅程——HTML5的多媒体支持
来源:互联网 发布:php技术总监 编辑:程序博客网 时间:2024/05/24 20:08
以前在大家制作网页的时候,通常都需要借助于第三方插件,比如flash;除此之外,开发者也可以使用自主开发的多媒体播放插件,但是HTML5规范的出现改变了这种状况。
以下是本章的内容,本人使用过以后感觉使用性其实一般,在面对现今浏览器版本不一,浏览器对HTML5元素方面支持率的层次不齐,以及格式方面的欠缺,导致HMTL5多媒体支持方面还是需要一段时间的发展区适应。
第五章 HTML5的多媒体支持
一、使用audio和video元素
代码:
预览效果:
指定controls属性就会生成播放控制条
对于音频格式,目前HTML5推荐OGG Vobis压缩格式,MP3具备的,OGG Vobis都具备而且更加优秀,而且完全免费,而且开放
对于视频格式,目前HTML推荐使用VP8作为视频压缩格式(*.webm)
Chrome对各种音频、视频的支持最好
考虑到各浏览器对音频、视频的支持互不相同,开发者可以指定多个媒体源,这需要借助<source>子元素来实现:
代码:
二、使用JavaScript脚本控制媒体播放
1.HTMLAudioElement与HTMLVideoElement支持的方法
这两个对象有下面这些方法:
play():播放
pause():暂停
load():重新装载
canPlayType(type):可播放type类型(MIME字符串)的音频、视频
代码:
预览效果:
FireFox支持较好(Opera和FireFox仅支持OGG格式音频,不支持MP3)
2.HTMLAudioElement与HTMLVideoElement支持的属性
TimeRanges对象,类似于数组,该对象包含多个时间段:
start(index):返回第index+1个时间段的开始时间
end(index):返回第index+1个时间段的结束时间
三、事件监听
1.事件
2.监听器
代码:
预览效果:
注:以上代码摘录于《疯狂HTML5/CSS3/JavaScript讲义》;
这篇文章主要是对这些章节进行了分类和归纳,如果您需要更加详细的信息,可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书,或登陆登陆:http://www.crazyit.org
- So Beautiful 旅程——HTML5的多媒体支持
- So Beautiful 旅程——HTML5的绘图支持
- So Beautiful 旅程 ——HTML5
- So Beautiful 旅程 ——HTML5表单相关元素和属性
- So Beautiful 旅程 前言
- html5多媒体格式支持
- Flex实践—So beautiful webpage.....
- 三天学会HTML5 ——多媒体元素的使用
- 三天学会HTML5 ——多媒体元素的使用
- HTML5中添加多媒体支持(一)
- HTML5中添加多媒体支持(二)
- HTML5中添加多媒体支持(三)
- BlackBerry的多媒体支持
- so beautiful so white
- Learn Beautiful Soup(6) —— BeautifulSoup中对于编码的支持
- Android多媒体-支持的多媒体格式
- HTML5多媒体素材的应用
- html5中多媒体的应用
- wireshark源代码分析
- 数据挖掘之RandomForeast算法
- Eclipse配置Python的IDE
- 一段简单的内存检测代码
- 关于模板的思考
- So Beautiful 旅程——HTML5的多媒体支持
- 我选择了这条路
- 括号匹配(一) 栈的应用
- STL源码剖析---迭代器失效小结
- 内存问题
- 数据挖掘之AdaBoost算法
- eclipse代码折叠/展开之笔记本快捷键设置
- 记十年前的暑假
- 广度优先搜索C++练习题HDU 1242 Rescue