太仓有专门做网站的地方吗,撤销网站备案,湖南seo快速排名,建筑设计公司logo在网页中的文本信息直观、明了#xff0c;而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性#xff0c;突出重点#xff0c;吸引用户。在HTML5之前#xff0c;需要借助插件为网页添加多媒体#xff0c;如Adobe Flash Player、苹果的QuickTime等。…在网页中的文本信息直观、明了而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性突出重点吸引用户。在HTML5之前需要借助插件为网页添加多媒体如Adobe Flash Player、苹果的QuickTime等。HTML5引入原生的多媒体技术设计多媒体更简便用户体验更好。
1、认识HTML5图像
图像与文本一样都是重要的网页对象适当插入图像可以丰富网页信息增强页面的可欣赏性。图像本身具有很强的视觉冲击力可以吸引浏览者的眼球制作精巧、设计合理的图像能激发浏览者浏览网页的兴趣。
在网页中使用的图像类型包括3种GIF、JPEG和PNG。
1.1、GIF图像
无损压缩不降低图像的品质而是减少显示色最多可以显示256色。支持透明背景。可以设计GIF动画。
1.2、JPEG图像
有损压缩在压缩过程中图像的某些细节将被忽略但一般的浏览者看不出来。支持1670万种颜色可以很好地再现色彩丰富的摄影图像。不支持透明背景和交错显示功能。
1.3、PNG图像
PNG具有GIF图像和JPEG图像的双重优点。一方面它可以无损压缩文件压缩技术比GIF好另一方面它支持的颜色数量达到1670万种同时支持索引色、灰度、真彩色以及Alpha通道透明等功能。
在网页设计中如果图像颜色少于256色推荐使用GIF格式如logo等如果颜色较丰富建议选用JPEG或PNG格式如新闻照片等。
2、设计图像
HTML 5.1新增picture元素和img元素的srcset、sizes属性使得响应式图片的实现更为简单便捷很多主流浏览器的新版本也对这些新增加的内容支持良好。
2.1、使用img元素
在HTML5中使用标签可以把图像插入网页中具体用法如下。 img srcURL alt替代文本 /img元素向网页中嵌入一幅图像从技术上分析img标签并不会在网页中插入图像而是从网页上链接图像img标签创建的是被引用图像的占位空间。
提示标签有两个必需的属性alt属性和src属性。具体说明如下
alt属性设置图像的替代文本。src属性定义显示图像的URL。
【示例】在页面中插入一幅照片在浏览器中的预览效果如下图 img srcimages/1.jpg width400 altHTML5/HTML5为标签定义了多个可选属性简单说明如下:
height定义图像的高度。取值单位可以是像素或者百分比。width定义图像的宽度。取值单位可以是像素或者百分比。ismap将图像定义为服务器端图像映射。usemap将图像定义为客户端图像映射。longdesc指向包含长的图像描述文档的URL。
不再推荐使用HTML4中的部分属性如align水平对齐方式、border边框粗细、hspace左右空白、vspace上下空白对于这些属性HTML5建议使用CSS属性代替使用。
2.2、定义流内容
流内容是由页面上的文本引述出来的。在HTML5出现之前没有专门实现这个目的的元素因此一些开发人员使用没有语义的div元素表示。通过引入figure和figcaption元素HTML5改变了这种情况。
流内容可以是图表、照片、图形、插图、代码片段以及其他类似的独立内容。可以由页面上的其他内容引出figure。figcaption是figure的标题可选出现在figure内容的开头或结尾处。例如 figurep思索/pimg srcimages/1.jpg width350 //figure这里figure只有一张照片放置多个图像或其他类型的内容如数据表格、视频等也是允许的。figcaption元素并不是必需的但如果包含它它就必须是figure元素内嵌的第一个或最后一个元素。
【示例】下面包含新闻图片及其标题的figure显示在article文本中间。图以缩进的形式显示这是浏览器的默认样式: articleh1我国首次实现月球轨道交会对接 嫦娥五号完成在轨样品转移/h1p12月6日航天科技人员在北京航天飞行控制中心指挥大厅监测嫦娥五号上升器与轨道器返回器组合体交会对接
情况。/pp记者从国家航天局获悉12月6日5时42分嫦娥五号上升器成功与轨道器返回器组合体交会对接并于6时
12分将月球样品容器安全转移至返回器中。这是我国航天器首次实现月球轨道交会对接。/pfigurefigcaption新华社记者b金立旺/b摄/figcaptionimg srcimages/news.jpg alt嫦娥五号完成在轨样品转移 / /figurep来源a hrefhttp://www.xinhuanet.com/新华网/a/p/articlefigure元素可以包含多个内容块。不过不管figure包含多少内容只允许有一个figcaption。
注意不要简单地将figure作为在文本中嵌入独立内容实例的方法。在这种情况下通常更适合用aside元素。要了解如何结合使用blockquote和figure元素。
可选的figcaption必须与其他内容一起包含在figure里面不能单独出现在其他位置。figcaption中的文本是对内容的一句简短描述即可就像照片的描述文本。
在默认情况下现代浏览器会为figure添加宽40px的左右外边距。可以使用CSS的margin-left和margin-right属性修改这一样式。例如使用margin-left:0;让图像直接抵到页面左边缘。还可以使用figure { float: left; }让包含figure的文本环绕在它周围这样文本就会围绕在图像的右侧。可能还需要为figure设置width使之不至于占据太大的水平空间。
2.3、插入图标
网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为16px×16px透明背景。移动设备iPhone图标大小为57px×57px或114px×114pxRetina屏iPad图标大小为72px×72px或144px×144pxRetina屏。Android系统支持该尺寸的图标。
【示例】下面通过多步操作演示如何在一个网站中插入图标。
第1步创建一个大小为16px×16px的图像保存为favicon.ico注意扩展名为.ico。为Retina屏创建一个32px×32px的图像。
提示ico文件允许在同一个文件中包含多个不同尺寸的同名文件。
第2步为触屏设备至少创建一个图像并保存为PNG格式。如果只创建了一个图像将其命名为apple-touchicon.png。如有需要还可以创建其他的触屏图标。
第3步将图标图像放在网站根目录下。
第4步新建HTML5文档在网页头部位置输入下面的代码 link relicon href/favicon.ico typeimage/x-icon /link relshortcut icon href/favicon.ico typeimage/x-icon /第5步浏览网页浏览器会自动在根目录寻找特定的文件名找到后就将图标显示出来。
如果浏览器无法显示可能是浏览器缓存过大和生成图标过慢尝试清除缓存或者先访问图标链接(http://localhost/favicon.ico)然后再访问网站就可以正常显示了。
2.4、定义替代文本
使用alt属性可以为图像添加一段描述性文本当图像由于某种原因不显示的时候就将这段文字显示出来。屏幕阅读器可以朗读这些文本以帮助视障访问者理解图像的内容。
HTML5规范推荐将alt文本理解为图像的替代性描述。例如 img srctulip.jpg alt上海鲜花港 - 郁金香 /在IE浏览器中替代文本出现在一个带叉的小方块旁边且两者由一个方框包围。在Firefox和Opera等其他浏览器中替代文本是单独出现的。Chrome和Safari浏览器不会显示alt文本而是显示缺失图像的图标。
提示如果图像对内容的价值较小对视障用户来说不太重要则可以提供空的替代文本即alt“”。如果图像与邻近的文本表达的信息相似也可以将alt属性置空。
注意不要用alt文本代替图像的caption。在这种情况下可以考虑将img放入一个figure元素并添加一个figcaption元素。
如果图像是页面设计的一部分而不是内容的一部分则考虑使用CSS的backgroundimage属性引入该图像而不是使用img标记。
2.5、定义Retina显示
Retina是一种显示标准就是把更多的像素点压缩至一块屏幕里从而达到更高的分辨率并提高屏幕显示的细腻程度也称为视网膜显示屏。
在网页设计中通过改变图像显示的尺寸在保持所有显示屏上图像尺寸相同的情况下让使用Retina显示屏的用户看到更高清的图像。
【实现方法】调整img的height和width属性均为原图像的1/2由于图像的高度和宽度比例保持不变图像不会失真。注意由于图像源是同一个文件加载时间没有变化。
【示例】假设在网页中插入一个40px×30px尺寸的图像也就是让图像在所有的显示屏上都显示为40px×30px包括普通屏和Retina屏。那么先创建80px×60px大小的图像。然后设计如下代码。 img srcphoto.jpg width40 height30 alt /浏览器将80px×60px的图像缩小以40px×30px的尺寸显示。对于80px×60px的图像来说总数为4800px普通屏会显示为1200pxRetina屏就可以显示为4800px让图像看起来更清晰。
如果设计40px×30px的图像Retina屏就会拉伸图像使用1200px填充4800px的空间就会导致图像清晰度降低。
提示图标字体与SVG图像文件格式在缩放时不会导致失真。对于单色的图标建议尽可能地使用图标字体而非使用图像。对于标识和其他非照片类图像可以考虑使用SVG格式。
2.6、使用picture元素
picture标签仅作为容器可以包含一个或多个source子标签。source可以加载多媒体源它包含如下属性
srcset必需设置图片文件路径如srcset“img/minpic.png”。或者是由逗号分隔的用像素密度描述的图片路径如srcset“img/minpic.png,img/maxpic.png 2x”。media设置媒体查询如media (min-width: 320px)。sizes设置宽度如sizes“100vw”。或者是媒体查询宽度如sizes“(min-width: 320px) 100vw”。也可以是逗号分隔的媒体查询宽度列表如sizes(min-width: 320px)100vw, (min-width:640px) 50vw, calc(33vw – 100px) 。type设置MIME类型如type image/webp或者type image/vnd.ms-photo 。
浏览器将根据source的列表顺序使用第一个合适的source元素并根据设置属性加载具体的图片源同时忽略后面的source标签。
【示例】使用picture元素设计在不同视图下加载不同的图片演示效果如下图所示 picturesource media(min-width: 650px) srcsetimages/kitten-large.pngsource media(min-width: 465px) srcsetimages/kitten-medium.png!-- img标签用于不支持picture元素的浏览器 --img srcimages/kitten-small.png alta cute kitten idpicimg/picture2.7、设计横屏和竖屏显示
本例以屏幕的方向作为条件当屏幕方向为横屏时加载kitten-large.png图片当屏幕方向为竖屏时加载kitten-medium.png图片。 picturesource media(orientation: portrait) srcsetimages/kitten-medium.pngsource media(orientation: landscape) srcsetimages/kitten-large.png!-- img标签用于不支持picture元素的浏览器 --img srcimages/kitten-small.png alta cute kitten idpicimg提示可以结合多种条件例如屏幕方向和视图大小分别加载不同的图片代码如下 picturesource media(min-width: 320px) and (max-width: 640px) and (orientation: landscape) srcset images/minpic_
landscape.pngsource media(min-width: 320px) and (max-width: 640px) and (orientation: portrait) srcset images/minpic_
portrait.pngsource media(min-width: 640px) and (orientation: landscape) srcset images/middlepic_landscape.pngsource media(min-width: 640px) and (orientation: portrait) srcsetimages/middlepic_portrait.pngimg srcimages/picture.png alt this is a picture /picture2.8、根据分辨率显示不同图像
本例以屏幕像素密度作为条件设计当像素密度为2 x时加载后缀为_retina.png的图片当像素密度为1 x时加载无retina后缀的图片。 picturesource media(min-width: 320px) and (max-width: 640px) srcsetimages/minpic_retina.png 2xsource media(min-width: 640px) srcsetimg/middle.png,img/middle_retina.png 2ximg srcimg/picture.png,img/picture_retina.png 2x altthis is a picture/picture提示有关srcset属性的详细说明请参考下面的介绍。
2.9、根据格式显示不同图像
本例以图片的文件格式作为条件。当支持webp格式图片时加载webp格式图片当不支持webp格式图片时加载png格式图片。 picturesource typeimage/webp srcsetimages/picture.webpimg srcimages/picture.png alt this is a picture /picture2.10、自适应像素比
除了source元素外HTML5为img元素新增了srcset属性。srcset属性是一个包含一个或多个源图的集合不同源图用逗号分隔每一个源图由以下两部分组成
图像URL。x图像像素比描述或w图像像素宽度描述的描述符。描述符需要与图像URL以一个空格进行分隔w描述符的加载策略是通过sizes属性里的声明计算选择的。
如果没有设置第二部分则默认为1 x。在同一个srcset里不能混用x描述符和w描述符也不能在同一个图像中既使用x描述符又使用w描述符。
sizes属性的写法与srcset相同也是用逗号分隔的一个或多个字符串每个字符串由以下两部分组成 1媒体查询。最后一个字符串不能设置媒体查询作为匹配失败后回退选项。
2图像size大小信息。注意不能使用%描述图像大小如果想用百分比表示应使用类似于vm100 vm 100%设备宽度的单位描述其他如px、em等的可以正常使用。
sizes给出的不同媒体查询选择图像大小的建议只对w描述符起作用。也就是说如果srcset用的是x描述符或根本没有定义srcset则sizes是没有意义的。
注意除了IE浏览器不兼容外其他浏览器全部支持该技术详细信息可以访问http://caniuse.com/#searchsrcset。
【示例】设计屏幕5像素比如高清2k屏的设备使用2500px×2500px的图片3像素比的设备使用1500px×1500px的图片2像素比的设备使用1000px×1000px的图片1像素比如普通笔记本显示屏的设备使用500px×500px的图片。对于不支持srcset的浏览器显示src的图片。
第1步设计之前先准备5张图片。
500.png大小等于500px×500px。1000.png大小等于1000px×1000px。1500.png大小等于1500px×1500px。2000.png大小等于2000px×2000px。2500.png大小等于2500px×2500px。
第2步新建HTML5文档输入以下代码然后在不同屏幕比的设备上进行测试。 img width500 srcsetimages/2500.png 5x,images/1500.png 3x,images/1000.png 2x,images/500.png 1x srcimages/500.png/对于srcset没有给出像素比的设备不同浏览器的选择策略不同。例如没有给出1.5像素比的设备要使用哪张图片浏览器可以选择2像素比的图片也可以选择1像素比的图片。
2.11、自适应图宽
w描述符可以简单地理解为描述源图的像素大小无关宽度还是高度在大部分情况下可以理解为宽度。如果没有设置sizes一般是按照100 vm选择加载图片的。
**【示例1】**如果视口在500px及以下时使用500 w的图片如果视口在1000px及以下时使用1000 w的图片以此类推。如果在媒体查询都满足的情况下使用2000 w的图片。实现代码如下所示。 img width500 srcsetimages/2000.png 2000w,images/1500.png 1500w,images/1000.png 1000w,images/500.png 500wsizes(max-width: 500px) 500px,(max-width: 1000px) 1000px,(max-width: 1500px) 1500px,2000px srcimages/500.png/如果没有对应的w描述符一般选择第一个大于它的。如果有一个媒体查询是700px一般加载1000 w对应的源图。
【示例2】使用百分比设置视口宽度。 img width500 srcsetimages/2000.png 2000w,images/1500.png 1500w,images/1000.png 1000w,images/500.png 500wsizes(max-width: 500px) 100vm,(max-width: 1000px) 80vm,(max-width: 1500px) 50vm,2000px srcimages/500.png/这里设计图片的选择视口宽度乘以1、0.8或0.5根据得到的像素选择不同的w描述符。例如如果viewport为800px对应80 vm就是800px×0.8640px应该加载一个640 w的源图但是srcset中没有640 w这时会选择第一个大于640 w的源图也就是1000 w的源图。如果没有设置一般是按照100vm选择加载图片的。
3、设计多媒体
在HTML5之前可以通过第三方插件为网页添加音频和视频但这样做有一些问题在某个浏览器中嵌入Flash视频的代码在另一个浏览器中可能不起作用也没有优雅的兼容方式。同时像Flash这样的插件会占用大量的计算资源会使浏览器的反应变慢从而影响用户体验。
3.1、使用embed元素
embed标签可以定义嵌入插件以便播放多媒体信息。它的用法如下。 embed srchelloworld.swf /src属性必须设置用来指定媒体源。标签包含的属性说明如下表所示 【示例1】设计背景音乐。备用练习文档test1.html另存为test2.html。在标签内输入下面的代码。 embed srcimages/bg.mp3 width307 height32 hiddentrue autostarttrue loopinfinite/embed指定背景音乐为images/bg.mp3通过hiddentrue属性隐藏插件使用autostarttrue属性设置背景音乐自动播放使用loopinfinite属性设置背景音乐循环播放。设置属性完毕在浏览器中浏览这时就可以边浏览网页边听着背景音乐。
提示要正确使用标签需要浏览器支持对应的插件。
【示例2】可以播放视频。新建test3.html在标签内输入下面的代码。 embed srcimages/vid2.avi width413 height292/embed使用width和height属性设置视频播放窗口的大小在浏览器中效果如下图所示
3.2、使用object元素
使用object标签可以定义一个嵌入对象主要用于在网页中插入多媒体信息如图像、音频、视频、Java applets、ActiveX、PDF和Flash。
object标签包含大量属性说明如下表所示 【示例1】下面代码使用object标签在页面中嵌入一幅图片效果如下图所示 object width100% typeimage/jpg dataimages/1.jpg/object【示例2】下面代码使用object标签在页面中嵌入网页效果如下图所示 object typetext/html height100% width100% datahttps://www.baidu.com//object【示例3】下面代码使用object标签在页面中嵌入音频。 object width100% classidclsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95param nameAutoStart value1 /param nameFileName valueimages/bg.mp3 //object提示param标签必须包含在object标签内用来定义嵌入对象的配置参数通过名/值对属性进行设置name属性设置配置项目value属性设置项目值。
object的功能很强大初衷是取代img和applet元素。不过由于漏洞以及缺乏浏览器的支持并未完全实现同时主流浏览器都使用不同的代码加载相同的对象。如果浏览器不能显示object元素就会执行位于object和/object之间的代码通过这种方式我们针对不同的浏览器嵌套多个object元素或者嵌套embed、img等元素。
4、使用HTML5多媒体
HTML5添加了原生的多媒体。这样做有很多好处速度更快任何浏览器原生的功能势必比插件要快一些媒体播放按钮和其他控件内置到浏览器极大地降低了对插件的依赖性。
现代浏览器都支持HTML5的audio元素和video元素如IE 9.0、Firefox 3.5、Opera 10.5、Chrome 3.0、Safari 3.2等。
4.1、使用audio元素
audio标签可以播放声音文件或音频流支持Ogg Vorbis、MP3、Wav等音频格式其用法如下 audio srcsamplesong.mp3 controlscontrols/audio其中src属性用于指定要播放的声音文件controls属性用于设置是否显示工具条。标签可用的属性如下表所示 提示如果浏览器不支持标签可以在与标识符之间嵌入替换的HTML字符串这样旧的浏览器就可以显示这些信息。例如 audio src test.mp3 controlscontrols您的浏览器不支持audio标签。/audio替换内容可以是简单的提示信息也可以是一些备用音频插件或者是音频文件的链接等。
【示例1】标签可以包裹多个标签用来导入不同的音频文件浏览器会自动选择第一个可以识别的格式进行播放。 audio controlssource srcmedias/test.ogg typeaudio/oggsource srcmedias/test.mp3 typeaudio/mpegp你的浏览器不支持HTML5 audio你可以 a hrefpiano.mp3下载音频文件/a (MP3, 1.3 MB)/p/audio以上代码在Chrome浏览器中的运行结果如图4.8所示。这个audio元素含默认控件集定义了两个音频源文件一个编码为Ogg另一个编码为MP3。完整的过程同指定多个视频源文件的过程是一样的。浏览器会忽略它不能播放的文件仅播放它能播放的文件。
支持Ogg的浏览器如Firefox会加载piano.ogg。Chrome同时理解Ogg和MP3但是会加载Ogg文件因为在audio元素的代码中Ogg文件位于MP3文件之前。不支持Ogg格式但支持MP3格式的浏览器(IE10)会加载test.mp3旧浏览器如IE8会显示备用信息。 【补充】 source标签可以为video和audio标签定义多媒体资源它必须包裹在video或audio标识符内。source标签包含以下3个可用属性。
media定义媒体资源的类型。src定义媒体文件的URL。type定义媒体资源的MIME类型。如果媒体类型与源文件不匹配浏览器可能会拒绝播放。可以省略type属性让浏览器自动检测编码方式。
为了兼容不同浏览器一般使用多个source标签包含多种媒体资源。对于数据源浏览器会按照声明顺序进行选择如果支持的不止一种那么浏览器会优先播放位置靠前的媒体资源。数据源列表应按照用户体验由高到低排序或者按照服务器消耗由低到高列出。
【示例2】演示在页面中插入背景音乐在audio标签中设置autoplay和loop属性详细代码如下所示。 audio autoplay loopsource srcmedias/test.ogg typeaudio/oggsource srcmedias/test.mp3 typeaudio/mpeg您的浏览器不支持audio标签。/audio4.2、使用video元素
video标签可以播放视频文件或视频流支持Ogg、MPEG 4、WebM等视频格式其用法如下 video srcsamplemovie.mp4 controlscontrols/video其中src属性用于指定要播放的视频文件controls属性用于提供播放、暂停和音量控件。video标签可用的属性如下表所示 【补充】HTML5的标签支持以下3种常用的视频格式简单说明如下
Ogg带有Theora视频编码和Vorbis音频编码的Ogg文件。MPEG4带有H.264视频编码和AAC音频编码的MPEG 4文件。WebM带有VP8视频编码和Vorbis音频编码的WebM文件。
提示如果浏览器不支持video标签可以在video与/video标识符之间嵌入替换的HTML字符串这样旧的浏览器就可以显示这些信息。例如 video src test.mp4 controlscontrols您的浏览器不支持video标签。/video【示例1】使用video标签在页面中嵌入一段视频然后使用source标签链接不同的视频文件浏览器会自己选择第一个可以识别的格式。 video controlssource srcmedias/trailer.ogg typevideo/oggsource srcmedias/trailer.mp4 typevideo/mp4您的浏览器不支持video标签。/video 一个video元素中可以包含任意数量的source元素因此为视频定义两种不同的格式是相当容易的。浏览器会加载第一个它支持的source元素引用的文件格式并忽略其他的来源。
将以上代码在Chrome浏览器中运行当鼠标经过播放画面时可以看到出现一个比较简单的视频播放控制条包含播放、暂停、位置、时间显示、音量控制等控件如下图所示 当为video标签设置controls属性时可以在页面上以默认方式进行播放控制。如果不设置controls属性那么在播放的时候就不会显示控制条界面。
【示例2】通过设置autoplay属性不需要播放控制条音频或视频文件就会在加载完成后自动播放。 video autoplaysource srcmedias/trailer.ogg typevideo/oggsource srcmedias/trailer.mp4 typevideo/mp4您的浏览器不支持video标签。/video 也可以使用JavaScript脚本控制媒体播放简单说明如下
load()可以加载音频或视频文件。play()可以加载并播放音频或视频文件除非已经暂停否则默认从开头播放。pause()暂停处于播放状态的音频或视频文件。canPlayType(type)检测video元素是否支持给定MIME类型的文件。
【示例3】演示通过移动鼠标触发视频的play和pause功能。设计当用户移动鼠标到视频界面上时播放视频如果移出鼠标则暂停视频播放。 video idmovies onmouseoverthis.play() onmouseoutthis.pause() autobuffertruewidth400px height300pxsource srcmedias/trailer.ogv typevideo/ogg; codecstheora, vorbissource srcmedias/trailer.mp4 typevideo/mp4/video上面代码在浏览器中预览显示效果如下图所示 提示要实现循环播放只需要使用autoplay和loop属性。如果不设置autoplay属性通常浏览器会在视频加载时显示视频的第一帧用户可能想对此做出修改指定自己的图像这可以通过海报图像实现。
例如下面代码设置自动播放和循环播放的单个WebM视频。如果不设置controls访问者就无法停止视频。因此如果将视频指定为循环最好包含controls。 video srcpaddle-steamer.webm width369 height208 autoplay loop/video下面代码指定了海报图像当页面加载并显示视频时显示该图像的单个WebM视频含控件。 video srcpaddle-steamer.webm width369 height208 posterpaddle-steamer-poster.jpg controls/video其中paddle-steamer.webm指向你的视频文件paddle-steamer-poster.jpg是想用作海报图像的图像。
如果用户观看视频的可能性较低如该视频并不是页面的主要内容那么可以告诉浏览器不要预先加载该视频。对于设置了preloadnone的视频在初始化视频之前浏览器显示视频的方式并不一样。 video srcpaddle-steamer.webm preloadnone controls/video上面代码说明在页面完全加载时也不会加载单个WebM视频仅在用户试着播放该视频时才会加载它。注意这里省略了width和height属性。
将preload设为none的视频在Firefox中什么也不会显示因为浏览器没有得到关于该视频的任何信息连尺寸都不知道也没有指定海报图像。如果用户播放该视频则浏览器会获取该视频的尺寸并调整视频大小。
Chrome在控制组件上面显示一个空白的矩形。这时控制组件的大小比访问者播放视频时显示的组件要窄一些。
preload的默认值是auto这会让浏览器具有用户将要播放该视频的预期从而做好准备让视频可以很快进入播放状态。由于浏览器会预先加载大部分视频甚至整个视频所以在视频播放的过程中对其进行多次开始、暂停的操作会变得更不容易因为浏览器总是试着下载较多的数据让访问者观看。
在none和auto之间有一个不错的中间值即preload“metadata”。这样设置会让浏览器仅获取视频的基本信息如尺寸、时长甚至一些关键帧。在开始播放之前浏览器不会显示白色的矩形而且视频的尺寸也会与实际尺寸一致。
使用metadata会告诉浏览器用户的连接速度并不快因此需要在不妨碍播放的情况下尽可能地保留带宽资源。
注意如果要获得所有兼容HTML5的浏览器的支持至少需要提供两种格式的视频MP4和WebM。这时须用到HTML5的source元素。通常source元素用于定义一个以上的媒体元素的来源。例如下面代码为视频定义了两个源MP4文件和WebM文件。 video width369 height208 controlssource srcpaddle-steamer.mp4 typevideo/mp4source srcpaddle-steamer.webm typevideo/webmpa hrefpaddle-steamer.mp4下载视频/a/p/video【补充】:利用现代浏览器提供的原生可访问性支持原生多媒体可以更好地使用键盘进行控制这是原生多媒体的另一个好处。HTML5视频和音频的键盘可访问性支持在Firefox、IE和Opera浏览器中表现良好。不过对于Chrome和Safari浏览器实现键盘可访问性的唯一办法是自制播放控件。为此需要使用JavaScript Media API这也是HTML5的一部分。
HTML5指定了一种新的文件格式WebVTTWeb Video Text TrackWeb视频文本轨道用于包含文本字幕、标题、描述、篇章等视频内容。更多信息可以参见www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles其中包括为了对接规范修改在2012年进行的更新。
