早期的因特网主要用来分享学术成果,但是对普通民众而言,更愿意在上面分享一些更有趣的内容,比如 视频 , 音频 ,这些技术在 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 中的多媒体标签有各种不好,但我们还是需要拥抱这项新的技术,因为他的用法,真的十分简单
audio标签
在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标签
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中推出了两个进度条控件,接下来就让我们来看看如何使用它们
process
外观
如果只是定义该元素 <progress><progress/> 不设置任何内容,显示效果如下图
progress.gif
作用:
用来显示任务的进度(进程)
如果想要用来显示 度量值 (比如容量使用情况)请使用 meter 标签
属性:
max: 总工作量
value: 已完成工作量
兼容性:
为了保证显示效果,可以再 progress 标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容
meter
外观:
通过属性值的搭配能够显示出多重不同的变化
常见属性:
high:规定较高的值
low:规定较低的值
max:规定最大值(可以超过,但是进度条已经满了)
min:规定最小值
value:规定度量的值
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter> <br/> <meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter> <br/> <meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter> <br/> <meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter> <br/> </body> </html>显示效果即截图
meter.png
总结
两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要 结合实际情况 决定是否使用它们(或者是使用对应的前端框架)。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
以上就是HTML5--多媒体标签详解的详细内容，更多请关注Gxl网其它相关文章！
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did41159
HTML5--多媒体标签详解
阅读：46次