HTML 5 预览(3)
作者:zhaozy 来源:蓝色理想 发布时间:2008-01-24 12:17:00
视频和音频
在最近几年, 网络上的视频和音频日益增多, 像是youtube, Viddler, Revver, MySpace, 还有其他很多可以让任何一个人更容易的发布视频和音频的网站. 然而, 因为当前的HTML缺少必要的方法顺利的插入并控制多媒体, 很多网站都依赖Flash来提供这样的功能. 尽管可能可以用各种各样的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒体, 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨浏览器兼容解决方案的插件.
对于各种基于Flash的媒体播放器, 创作者们对提供他们自己的用户定制设计的界面, 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音量. 为浏览器提供插入视频和音频并提供DOM接口让Script控制播放的功能要通过安装本地程序支持.
视频和音频的新元素让这个工作变得更加简单. 这两者之间的大部分API都是共享的, 唯一区别就关系到可视和不可视媒体之间的固有区别.
Opera和Webkit已经放出了一个部分支持视频元素的版本, 你可以到 experimental build of Opera ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/ ) 或者最新的 nightly build of WebKit ( http://nightly.webkit.org/ ) 去下载并试验一下这些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格式, 包括第三方的解码器.
插入视频最简单的方法是使用video元素, 它会允许浏览器提供一个默认的用户界面, 其中controls属性是一个boolean值属性, 这个属性是让创作者决定用户界面是否要显示(默认是不显示).
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
可选择的poster属性可以指定在视频播放前用来显示的图像. 尽管有一些视频格式有它们特有的预览图格式, 就像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择方案.
用audio元素在页面内插入音频文件也非常容易. audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属性.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
HMTL 5 提供了source 元素, 让浏览器根据媒体类型或编码器的支持来指定视频或音频文件. media属性会根据设备的局限性和被指定的媒体的类型和编码器来指定一个媒体选择查询. 当在使用 source 元素时, 上级元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
为了那些需要给用户界面更多一点控制来符合页面的总设计的创作者以方便, 广泛的API提供了一些方法和事件让scripts来 * 体文件. 最简单的方法就是用 play(), pause(), 然后可以通过设置 currentTime 来进行循环. 接下去的例子会解释怎么用.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>
还有很多这里没有讨论到的属性以及API可以被用到视频音频元素. 如果想知道更多, 你可以参考 current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).
猜你喜欢
- 今天在一个QQ群中看到有人在问一个进度条的实现方式,当时因为工作时间,需求相对也比较紧,只是简单的说了一下可以通过CSS的边框属性和背景属性
- 用下列代码可在控制弹出NTLM验证窗口:<% Response.Status = "401 Unauthorized&quo
- 阅读上一篇:javascript面向对象编程(三)继承是面向对象语言中的一个重要概念,现在我们来探讨一下继承。在网上搜一下javascrip
- 一个不错的js星级评分代码,可以评多个指标。相关文章推荐:用css制作星级投票评分功能 效果图:<script language=&q
- jquery作为一款高质量的框架被大多web开发者所推崇。jquery也的确是一款伟大的产品,在实际开发中明显提高了效率。但是任何产品并不是
- 在正文前,先简短介绍自己。我任职于广州的某个网站服务公司的系统开发员,主要任务是以.Net编写各种web系统,例如CMS.EIP。大家都知道
- 百度了一下,找了点别人的方法改进了一下。 获取天气网址:http://www.weather.com.cn/html/weather/101
- 在页面中自定义了changejs函数后页面提示错误:Active Server Pages 错误 'ASP 0138' 嵌套
- icon可以用多个软件制作,也可以通过一些网站把普通图片转换为.ico文件,但通常存在的问题是图片本该透明的地方经转换后变为了黑色或者白色,
- Photoshop Express,也就是传说中的web版photoshop,来了。和想象中的web photoshop相比,这个Photo
- 下面是滚动条css代码参数介绍:scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 scrollbar-highl
- 在CSS布局中,ul,li的运用是非常常见的。配合DIV与CSS,创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例,
- DatePart 的语法是 DatePart(interval, date),用以取 date 的某部分。 interval yyyy:da
- 很多人一直都有个想法,要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include
- 作为一个非设计出生的研究思路偏向的设计师,带着少了设计师自恋和自怜的眼光,我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的,
- 如果能,请问如何实现 谢谢set aa=server.cre
- Oblog4.6 ACCESS版转换为UCenterHome1.5的全过程1、 说明:
- 07年,我是极力推崇网站规范制作,好处很多,对商业,对用户,对设计师。我们走了两年,现在有了一定的成效,我们也看到了规范所带来的好处和便利。
- BIT[(M)]位字段类型。M表示每个值的位数,范围为从1到64。如果M被省略, 默认为1。TINYINT[(M)] [UNSIGNED]
- 在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?为什么要这么做?有什么根据么?