源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[心得技巧] 响应式WEB设计学习(2)—视频能够做成响应式吗

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-1-9 16:58:11 | 显示全部楼层 |阅读模式
除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下

上集回顾:

昨天讲了页面如何根据不同的设备尺寸做出响应。主要是利用了@media命令以及尺寸百分比化这两招。

上集补充:

其中,利用以下CSS设置让图片或视频大小不超过设备屏幕的宽度:

复制代码代码如下:
img, object{
max-width:100%;
}

这一语句一般加在@media screen and (max-width:481)的判断内,主要是让手机用户在查看网页时图片不至于比手机屏幕还大。

这一招在《Head First Moblie Web》中被称为“Fluid Image Technique”。 

视频能够做成响应式吗?

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,一般视频都是上传到youtube、土豆/优酷、新浪等网站上后,再用链接的形式加入到我们的网页中。

为什么在iphone上看不到youtube视频?(在境外)

在IOS上查看网页视频时,在不越狱安装插件的情况下,是没法看flash格式的视频的,因为iphone上的浏览器不支持Adobe Flash,这跟苹果等公司的商业竞争政策有关,咱也没办法。对于这一问题,使用youtube视频源的web设计有一个解决方案,就是将原来嵌套在网页中的object embed格式的代码段替换成新的代码段。

如,旧的页面嵌套代码段为:

复制代码代码如下:
<object width="230" height="179" type="application/x-shockwave-flash" data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&amp;h1=en_US&amp;rel=0"><embed src=... /></object>

将其替换为:

复制代码代码如下:
<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>

可以看到,两个视频的出路其实是不同的,youtube将用于移动设备显示的嵌入型视频放在embed目录下,这样大部分的移动设备就可以正常观看视频了。

国内的视频源可以用<iframe>这一招吗?

分别截取土豆和sina的各一段嵌入式视频代码可以看到用的都是object embed方式:

土豆:

复制代码代码如下:
<embed
src="....swf"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
wmode="opaque"
width="480" height="400"></embed>

sina:

复制代码代码如下:
<div><object id='sinaplayer' width='480' height='370' >
<param name='allowScriptAccess' value='always' />
<embed pluginspage='http://www.macromedia.com/go/getflashplayer'
src='....swf'
type='application/x-shockwave-flash'
allowScriptAccess='always'
allowFullScreen='true'
name='sinaplayer'
width='480' height='370'></embed>
</object></div>

两者的参数设置也差不多,不过土豆的代码要简洁很多。

现在,用<iframe>代码块将土豆视频地址包起来,放入测试页面中,会发生一个问题:

20130109165656130.jpg

20130109165656130.jpg

这是图片哦……

不能全屏了……这是因为单独截取了播放地址,而与flash有关的例如allowFullScreen等设置都被抛弃了。那么用iframe这个方法显然就有两个问题了:

一是片源格式没有改变,还是swf格式,仍然不能被不支持Adobe Flash的手机播放。

二是因为丢失了flash播放器的参数设置,而丧失了部分功能。

这样显然是不能接受的。

对于第一点,只能期待视频网站使用更通用的视频格式来规避各个硬件厂商之间商业竞争带来的副作用;对于第二点,我们将继续使用object embed的方式,因为手机看不到flash格式的亲们已经找到了各种破解、插件来弥补了,所以web设计者在没有更通用片源格式的情况下,还是沿用之前的方式好了。

但是,视频格式的大小一般是固定的,只使用CSS而不使用javascript很难动态的根据设备的大小或者浏览器当前的尺寸来动态改变。就视频的宽度(width)而言,是可以设置成百分比的形式,如设置成容器的80%,那么该视频就会一直占其所在容器的80%的宽度,但是高度(height)就无法设定了,因为一般人都不会按比例去缩放浏览器窗口。要么是拉窄点,要么是缩短点。所以,靠百分比的方式来保证视频尺寸的缩放不太现实。

在这样的前提下,还是希望视频就保持一定的尺寸,而网页的其他部分根据浏览器的大小动态改变布局。

如视频所示:

 可以看到,在拉动浏览器的整个过程中,视频的尺寸是不改变的,直到浏览器的宽度小于视频的宽度时,视频的宽度才变小(使用了上面提到的Fluid Image Technique)。

制作整个效果没有什么新的技巧,也就是将CSS的尺寸判断又两种变成了三种而已。具体的可以看演示代码。

演示代码在这里下载

总结:

视频大小的自适应单靠CSS本身似乎是做不到的。而希望移动设备可以正常的观看页面视频还期待于视频网站使用更通用的视频格式而不是flash……

最后拿一个书中的公式收尾吧RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind

大意是响应式设计 = 流式网格布局 + @media语句 + 流式图片/媒体 + 设计者的意识 

回复

使用道具 举报

2

主题

2万

回帖

347

积分

中级会员

Rank: 3Rank: 3

积分
347
发表于 2022-9-8 12:06:52 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2023-1-26 11:22:16 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-22 10:40:45 | 显示全部楼层
啊,数码撒飒飒飒飒
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-16 05:07:14 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-1 18:22:08 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2023-7-28 01:02:53 | 显示全部楼层
8888888888888888
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2023-10-22 16:17:55 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-16 04:27:56 | 显示全部楼层
问问问企鹅哇哇哇哇哇
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2023-12-11 08:32:57 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-21 23:24 , Processed in 0.122671 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表