响应式网页设计中视频处理

来源:eidea编辑:xie浏览量:692
对于网站而言视频是极其重要的营销工具。因此,对于富有弹性的响应式视频的需求越来越多。就像图片一样,让图片灵活地适配网页也是个头疼的事情。这并不关乎视频播放器的尺寸,但即使是播放按钮这样的的基础网页元素,也都需要针对千奇百怪的设备来适配和优化。以下提供几个解决方案:

为Wordpress中的视频优化

虽然wordpress提供了诸多响应式的主题,但是一般情况下,这些内嵌视频并不会根据屏幕尺寸自行适配。这也是为何它们所在的网页可能会出现拉伸,或者不对称的情况。FitVids这一插件完美的解决了这个问题。这是一个jQuery插件,它能让视频针对屏幕尺寸自行适配。激活插件之后,Wordpress会在发布视频内容时,向CSS选择器中自动添加“.post”类。保存修改,你可以尝试在不同尺寸的设备中观察网页的布局,感受视频播放的体验,看看它是怎么工作的。

此外,还有更多可选的Wordpress插件:

➤Fluid Video Embeds

➤Video Overlayer

➤MarcTV Video Embed

➤Responsive Video

从其他网站中手动嵌入视频

YouTube以及其他类似的视频托管网站通常以像素为单位固定宽度和高度,并且嵌入到代码中。

对于普通网站,这并没有什么不妥,但是对于响应式网页,这样的视频是不合用的。这些使用了内置页框和对象标签的视频网站代码,用HTML5的视频元素来处理是不可能的。

简单的说,HTML5的标签搞不定来自Youtube和Vimeo的嵌入视频。

这个时候,CSS再次派上了用场。具体来说,即使容器元素按比例缩小,你可又可以保持视频的内在比例。

这种技术可以帮助你讲youtube、Vimeo和SlideShare等流媒体网站的视频嵌入到网页中并自然地显示。

你所要做的,是使用容器来嵌入代码,并指定子元素的绝对位置,这会使得嵌入的视频根据屏幕宽度自动扩展。

值得注意的是,剥离出视频并且按照尺寸比例封装到Div的过程并不简单,此外,这项技术对于多视频的网站可行性并不高。

不过如果你的网站已经设计成响应式的页面,那么这项技术将会在你的网站上完美运行。好了,希望以上的方案可以给大家带来一些帮助。

响应式案例欣赏

克莱蒙特酒业

响应式企业官网设计

八爪鱼教育

响应式企业官网制作

歌莉娅服饰

知名品牌H5响应式网站