IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素
在HTML5之前,要在网站上展示视频、音频、动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢。HTML5的出现使这一局面得到了改观。在HTML5中提供了音频的标准接口,多媒体播放再也不需要安装插件了,只需要一个支持HTML5的浏览器就可以了。本节介绍video和audio这两个HTML5新增加的元素,它们分别用来处理视频与音频数据。目前Safari 3以上、Firefox 4以上、Opera 10以上,以及Google Chrome 3.0以上的浏览器都实现了对这两个媒体元素的支持。以audio元素为例,只要把播放音频的URL地址指定给该元素的src属性就可以了。代码如下所示:
将上包含上述代码的html文件在浏览器中打开,如果浏览器支持音频功能则出现音频播放器,否则页面显示“您的浏览器不支持音频audio功能”。效果如图4所示:
图4 音频<audio>标签
视频video元素的使用方法和audio相似,只要设定好元素的长、宽等属性即可。代码如下所示:
图4.5 视频<video>标签
各浏览器对于各种媒体类型及编码格式的支持情况各不相同,可以通过source元素来为同一个媒体数据指定多种播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放。浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,选到为止。各浏览器对于编码格式的支持情况如表3所示。
表3 各浏览器对于编码格式的支持情况
audio和video元素通过一些常用属性的使用,可以定义和扩展一些功能,它们所具有的属性大致相同。两个元素常用的属性如表4所示。
表4 audio和video元素常见属性说明
除了表4中提供的属性,还有一些属性、方法和事件可用,但需要结合JavaScript来实现一些特定的效果。例如,通过error属性可以处理出现的错误;使用networkState属性读取当前网络状态;使用play方法来播放媒体;使用load方法重新载入媒体进行播放;通过timeupdate事件来通知当前播放位置的改变;结合JavaScript来显示当前的播放进度等。
IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素的更多相关文章
- IT兄弟连 HTML5教程 多媒体应用 小结及习题
小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...
- IT兄弟连 HTML5教程 多媒体应用 HTML图像地图
图像地图是带有可点击区域的图像,通常情况下,每个区域是一个相关的超级链接.点击某个区域,就会到达相关的链接,也可以通过图像地图实现图片切换效果. 1 什么是图像地图 把一幅图像分成为多个区域,每个区 ...
- IT兄弟连 HTML5教程 HTML文档头部元素head
HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题
小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...
- IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性2
5 height和width属性 height和width属性规定用于image类型和input标签的图像高度和宽度.图像通常会同时指定高度和宽度属性.如果图像设置高度和宽度,图像所需的空间在加载页 ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素
HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...
随机推荐
- web开发中浏览器跨域问题
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
- python学习-def
# 函数# 实现了某一特定功能.# 可以重复使用. # len() 功能:获取长度.# input() 功能: 控制台输入# print() 功能:输出 # 语法 关键字def"" ...
- HTML语法简要总结
HTML基本语法 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 常见浏览器内核介绍 浏览器是网页运行的平台,常用的浏览器有IE.火 ...
- before和after的操作
before和after,前者是在元素之前插入东西,后者是在元素后面插入东西,但插入的东西不仅仅只是文字而已,还有图标,以及计算器的操作. 由于两者的操作基本一样,这里以before为例 插入文字 & ...
- Caffe源码-InsertSplits()函数
InsertSplits()函数 在Net初始化的过程中,存在一个特殊的修改网络结构的操作,那就是当某层的输出blob对应多个其他层的输入blob时,会在输出blob所在层的后面插入一个新的Split ...
- 你竟然没用 Nuget 构建项目?
想写这篇文章缘起于公众号文章里的一条留言: 对于一个现代化的开发平台,建立一种让开发者创建,分享与使用可复用代码的机制是十分必要的.这种"可复用代码"被打包后的文件通常被称作&qu ...
- 8 种经常被忽视的 SQL 错误用法,你有没有踩过坑?
1.LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如对于下面简单的语句,一般 DBA 想到的办法是在 type, name, create_time 字段上加组合索引 ...
- eruda手机端调试神器
在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,如果想在手机上能和浏览器一样看控制台调试就更加完美了: 一个手机端调试神器eruda是一个专为手机网页前端设计的调试面板 ...
- Spring Cloud系列:不重启eureka,清除down掉的服务
场景描述 做项目的时候,我的服务改了个ip,然后重新启动后,原ip的服务down掉了,但是没有清楚掉,还在上面,导致我用swagger测试的时候,访问不到真正up的程序.重启eureka又不划算,于是 ...
- TypeScript 参数属性
假设类中创建的 readonly 类型的属性,该类型的属性只能在声明处或构造器中进行初始化. class Octopus { readonly name: string; readonly numbe ...