CUED-迅雷用户体验设计中心

迅雷云播页面重构心得

Qin~Qing | 2014-05-15 | 网页重构

迅雷云播

随着迅雷云播客户端2.0版本的上线,迅雷云播实现了(网页版、PC客户端)共用一套html结构的目标!感谢项目组,感谢击哥,让自己有机会负责云播各终端的重构工作。从重构的角度来讲,我们做着:精度还原设计稿,代码的标准化、模块化、语义化,为开发童鞋提供代码注释,学习应用Javascript提高输出页面的实现效果,图片优化等等工作。

多终端html统一难实现难点现状:

  1. 技术上:方案需求方的不同,设计师的不同,设计稿结构差异,历史遗留版本,工作难统一。
  2. 自身:项目团队不同,重构负责人不同,开发童鞋不同。

迅雷云播 可以搜索关键字:云点播,云播放,云播特权。

<meta name=”keywords” content=”云点播 云播放 视频 在线 免下载 播放 迅雷 免费 离线下载 迅雷客户端 快速播放 BT种子 下载链接 转码 iphone ipad 安卓 破解版“/>

<meta name=”description” content=”迅雷云播是迅雷公司推出的BT种子、视频下载链接在线快速播放的服务,有BT种子、视频下载链接即可快速播放,支持多浏览器、苹果和安卓系统、ipad等移动设备“/>

pc客户端请看截图:

客户端
a

网页版请看截图:

云播-我的收藏
云播-我的收藏b

以播放页内嵌html结构为例讲解云播项目页面重构方面的知识点

需求分析:

  1. 1、二栏宽高自适应布局
  2. 2、左侧nav固定宽度可伸缩,右侧自适应屏幕宽度。
  3. 3、flash嵌套html应注意
  4. 4、背景图片清缓存问题
二栏布局

二栏布局的结构我们一般会这样写:

<div class="yb_c_wp" id="mainwrap">
   <div class="yb_cloud_play">
        <div class="yb_imgbox">
            <div>播放页部分</div>
        </div>
    </div>
    <div class="wp_navAside">
        <div>左边栏内容</div>
    </div>
</div>

高度自适应浏览器全屏解决方法:

a)、用样式表控制

.yb_c_wp{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
height: 100%;
overflow: hidden;
background:#232632;
}

以上代码使最外层容器绝对定位之后,上下左右四边都与浏览器可视化边框贴紧,从而做到了适配各种屏幕,但此方法不适用于ie低端浏览器。

b)、用js动态读取浏览器可视化高度并赋值与外层容器class=”yb_c_wp”

高度自适应js代码

function fn(){
var mainwrap = $(‘#mainwrap’); // 定义变量
window.onresize = function();{ // 调用onresize事件在窗口或框架被调整大小时发生
var wHeight = $(window).height();// 获取浏览器可是化窗口高度
mainwrap.height(wHeight);// 外层容器高度赋值
};}
fn();

考虑兼容高低端浏览器,a方案不适用,b方案可以使用用

二栏宽度自适应布局(左侧定宽)方法:

方法一:负边距

样式表代码:

.wp_navAside{
float:left;
clear:left;
width:144px;
height:100%;
};
.yb_cloud_play{
float:right;
width:100%;
margin-left:-144px
}
.yb_imgbox{
margin-left:144px
};

方法二:绝对定位用Js动态获取右侧可变宽度

样式表代码:

.wp_navAside {
position: absolute;
bottom: 0;
left: 0;
top: 0;
width: 144px;
height: 100%;
background: #232632;
border-right:1px solid #000000;
}
.yb_cloud_play{
position: absolute;
height: 100%;
width: 100%;
};
.yb_imgbox{
position: absolute;
bottom: 0;
left: 144px;
top: 0;
right:0;
}

右侧宽度取值js代码

function fn(){
var mainwrap = $(‘#mainwrap’); // 定义变量
var width_box = $(‘#XL_CLOUD_VOD_PLAYER’); // 定义变量
window.onresize = function();{ //调用onresize事件在窗口或框架被调整大小时发生
var width_spread = $(window).width()-$(“.wp_navAside”).width(); // 获取右侧宽度=浏览器宽度-左侧变化宽度(伸缩状态)
$(width_box).width(width_spread); // 右侧宽度赋值
};}
fn();

方案一、二实现效果无兼容性差异。方案一简单易懂的css样式表,但无法满足播放页右侧单一内容撑开全屏的要求,这里推荐使用方案二。

(综上所述:播放页自适应宽高二栏布局我们推荐使用的最终方案为:方案b+方案二 )

nav栏伸缩问题,主页面海报右侧内容间距自适应各种分辨率

关于左侧栏伸缩解与右侧海报内容间距匹配不同分辨率问题,别无它法为兼容低端浏览器,我们只能通过添加不同的全局类名控制局部变化。这里需要细心,耐心整理各种分类情况!(以常用分辨率划分,右侧内容间距我们需要考虑的情况=2(伸开/收缩状态)*【3(好友/海报/缩略图)*【(1920)+(1440)+(1366)+(1280)+(1010)+(990)】】)

客户端播放页flash嵌套html优化

查看效果请下载demo用浏览器打开。

demo1:播放器页面

demo2:播放器页面优化

内容在flash上的几种方法总结

a) 空标签空背景方法:

定位a标签到对应flash上边某一位置
a{
background:url(about:block) no-repeat; // 对标签背景如下设置
zoom:100;
}

b) iframe方法:

内容模块同级添加iframe结构:
<iframe src="transparent.html"> 
//transparent.html为空文件,iframe需有背景颜色,ie不支持透明颜色iframe结构在flash上.
</iframe>
背景图片清缓存问题

同一套结构,背景图片清缓存你还在手动添加版本号吗?如果是,那么有点落后了。用less和sass的变量帮你一步修改项目中所有版本号。既方便,又好维护!

例子:
@version: ~` “” `; // 版本号
@suffix: ~` “?” + “@{version}” `; // 后缀名
@yb_bgimage: ~` “../img/wp_bg.png” + “@{suffix}” `;
.yb_bgimage{background:url(@yb_bgimage) no-repeat -2px -95px;}

学习请查看: Less   Sass

结语:

工作的乐趣是需要自己创造的。乐趣何在?靠自己发现!为你的团队提供更高效的解决方案,在工作中积累、思考,探索更好的规范、流程、工具、方法等等。分享是一种快乐!积极的心态让我们永远充满活力!加油!

  1. 謝謝分享:)

  2. 学习了,谢谢

  3. 黄赫哲 说:

    Less和Sass如何使用到生产环境中?

  4. 很好,学到了不少东西,感谢!

  5. 啄米鸟 说:

    云播是我在迅雷产品中使用时间最长的产品,你们懂的。

发表你的评论(点这里取消回复)