HTML5--多媒体标签详解

早期的因特网主要用来分享学术成果,但是对普通民众而言,更愿意在上面分享一些更有趣的内容,比如视频,音频,这些技术在html5之前都不是由html标签提供的

虽然早期的html并没有提供支持视频或者音频播放的标签,但是这并不影响人们分享的欲望

支持方式1:

使用embed直接将视频塞入页面,然后就可以使用Windows Media Player,Apple QuickTime或者其实的视频播放器来创建播放窗口

但是这种方式对于视频本身不可控,兼容性问题也无法顾及

支持方式2

使用浏览器插件,一个是微软的Silverlight,还有使用最普遍的Adobe Flash

Flash不但完全解决了浏览器支持问题,而且装机率之高让人咋舌(基本上99%的计算机都安装了Flash播放器)

使用Flash播放视频除了要学习Flash这项技术本身以外,更关键的是在iPhone,ipad并不支持这项技术

如果想要查看视频的播放方式,将鼠标移动到视频窗口,右键如果可以看到Flash等文字,那么该网站使用的就是Flash插件

多媒体标签:

Html5为了解决使用Flash的各种问题推出了多媒体标签

由于视频格式问题,不同的浏览器对于相同格式的视频支持不同,需要准备多份视频

无法对播放的视频提供很好的保护效果,因为用户可以直接对视频文件另存为

总结:

虽然html5中的多媒体标签有各种不好,但我们还是需要拥抱这项新的技术,因为他的用法,真的十分简单

在w3c中对于audio的说明是这样的audio标签

示例代码1:

下面演示一种最简单的使用方式

src:音频的地址

controls:音频播放控制器

autoplay:自动播放

loop:循环

poster:指定视频不播放时显示的封面

 audio src= song.ogg controls= controls autoplay loop  /audio 

示例代码2:

src:音频的地址

由于音频格式在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码

source:指定多个音频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容

 audio controls= controls  source src= song.ogg type= audio/ogg  source src= song.mp3 type= audio/mpeg 你的浏览器不支持此种格式 /audio 

Video标签用来播放视频,用法跟audio标签十分类似

示例代码1:

src:视频地址

controls:控制器

autoplay:自动播放

loop:循环

width:宽度

height:高度

 video src= movie.ogg controls autoplay loop width = 200px height = 200px  /video 

示例代码2:

src:视频的地址

由于视频在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码

source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容

 video width= 320 height= 240 controls= controls  source src= movie.ogg type= video/ogg  source src= movie.mp4 type= video/mp4 你的浏览器不支持video标签 /video 

在html5之前如果我们想要使用进度条,可以通过一些前端框架,或者自己使用控件搭建出类似的外观,但是在html5中推出了两个进度条控件,接下来就让我们来看看如何使用它们

外观

如果只是定义该元素 progress progress/ 不设置任何内容,显示效果如下图

progress.gif

作用:

用来显示任务的进度(进程)

如果想要用来显示度量值(比如容量使用情况)请使用meter标签

属性:

max: 总工作量

value: 已完成工作量

兼容性:

为了保证显示效果,可以再progress标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容

外观:

通过属性值的搭配能够显示出多重不同的变化

常见属性:

high:规定较高的值

low:规定较低的值

max:规定最大值(可以超过,但是进度条已经满了)

min:规定最小值

value:规定度量的值

示例代码:

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Title /title  /head  body  meter >
显示效果即截图

meter.png
总结
两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. VeVb.com原创html5视频教程
以上就是HTML5--多媒体标签详解的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。