html5:音频、视频和其他多媒体
- 视频文件格式
html5支持三种视频文件格式(即编解码器):.ogg .mp4或.m4v .webm 。 编解码器是使用压缩算法对数据的数字流进行编码和解码,使之更适合播放的计算机程序。在有的浏览器中如果没有正确地设置MIME类型,媒体文件就不会播放。
要获得所有兼容html5浏览器对媒体播放的支持,需要至少提供两种格式的视频:mp4 和 webm。
将以下文本添加到后缀名为.htaccess(或其他)文件中设置MIME类型:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/ogg .ogg
AddType audio/mp3 .mp3
- 添加单个视频
<video src="" width="" heigth="" autoplay muted controls loop poster preload> </video>
属性介绍:
autoplay -- 自动播放
muted -- 是否静音播放
controls -- 添加浏览器为视频设置的默认控件
poster -- url值,指定视频加载时要显示的图像,(而不显示视频的第一帧)
preload -- 告诉浏览器要加载的视频内容的多少。none---不加载任何值,metadata表示仅加载视频的元数据,auto表示让浏览器决定怎么做。
- 为一个媒体文件指定多个来源,确保获得所有浏览器的支持
通过source元素实现,在videl标签中可以添加多个source元素,用来指定媒体文件的来源
<video controls muted autoplay preload="none" loop> <source src="mp4filesource.mp4"> <source src="webmfilesource.webm"> <p><a href="">旧浏览器显示p元素中的文本</a></p> </video>
source元素的属性有:
type:用于指定视频的类型,帮助浏览器决定它是否能够播放该视频
media:用于为视频来源指定css3媒体查询,从而可以为不同屏幕尺寸的设备指定不同的视频播放。
- 音频文件格式
常用的是ogg 和 mp3。
1) 添加单个格式的音频文件
<auto src="" autoplay controls loop muted preload>
2)添加多个格式的音频文件
如同视频文件,使用source元素
<audio>
<source src="" type="" media="">
</audio>