一、任务描述

单位最近要设计开发一个全新的视频网站，用于存放和展示公司的宣传视频和培训视频。具体要求是：
1)保存和管理公司现存的2000个左右的视频资源，约5TB的数据量。
2)视频播出要清楚流畅，可以在企业内网和互联网上播放
3)能够通过手机和电脑观看
4)用户观看需要登录，用户也可以上传视频资源
5)使用一级分类，保留二级分类的扩展能力
6)界面要漂亮简洁大气上个档次！
作为一个技术团队负责人，这个要求对我来说不算很高，实施过程还算顺利，下面简单介绍设计思路和实现过程。

二、技术选型

1)前端： jquery + Bootstrap界面框架，能够很快设计出美观的效果，重点是页面布局风格，如何做到人见人爱
2)后端： Nginx + PHP + MySQL，这个没有太多的讨论必要，技术很成熟。前后端完全分离，后端提供Restful API接口给前端，前端通过接口获取数据并渲染
3)视频服务器： 云视睿博 NTV Media Serve G3，非常成熟好用的视频平台，播出效果流畅高效，集成几个接口就可以实现上传、截图、转码、播出、管理等功能，这个也算是成功的重要环节

三、设计细节

重点说前端设计和实现，是最花费时间和精力的环节。
首次确定页页面包括：主要页面： 首页(主页)、播放页、个人页、资源管理页、登录页； 次要页面： 关于跳转页面： 公司主页、公司内部站
经过分析，我们认为，对于一个视频网站，应当尽量减少二级页面的数量，要在主页上就能实现视频展示和播放，以及“关于”信息的展示。这样确定后，页面就简化为如下3个：主页： 资源展示、视频播放、关于个人页： 个人信息显示和修改资源管理页： 上传和管理视频资源，编辑视频资源信息

3.1 首页设计

首页要展示的信息包括：
1)标题、LOGO、登录用户信息、手机访问入口、关于
2)资源分类名
3)资源列表，以卡片形式展示资源信息，卡片上包括封面、标题、小标题、大小、码率等信息
4) 页脚
页面设计效果如下：

::: hljs-center

页面效果

:::

在页头部分，包括了LOGO、手机扫码入口、关于和登录用户。Logo居左，功能链接放于右上，显得错落有致，也是一种常见的设计模式。
LOGO下面是分类类表，点击每个分类名称，页面上的资源卡片会动态变化，加载该分类的内容。
::: hljs-center

页头部分

:::

页面卡片部分，显示的信息很多，包括了：封面、标题、大小、市场、码率、分辨率、上传时间、观看次数等等，但由于采用卡片式展示，也显得很简洁。
::: hljs-center

视频卡片

:::

页脚的设计，采用了常见的居中模式，不再细说。

3.2 播放设计

视频播放原来计划在单独的页面播放，也就是点击卡片，打开一个新页面，在新页面里播放。
经过分析发现，播放页没有太多延伸业务，只是播放视频，因此我们认为放在首页以弹窗形式播放更好些，用户不用打开新页面就能播放，避免了多个页面之间的跳转和关闭操作。

::: hljs-center

播放效果

:::

3.3 登录页面

登录页面是一个独立页面，用户访问首页、资源页，如果没有登录则会提示登录，并跳转到登录页。
登录可以使用手机号码和微信登录，这两种登录方式是可以通过后台设置进行开启和关闭的，例如只保留手机登录。
::: hljs-center

登录页面

:::

3.4 其他页面

资源管理、用户个人页面，也采用卡片展示，不再细说。

四、手机观看

手机页面采用Bootstrap界面框架的自适应优势，根据屏幕大小进行自动调整布局和元素大小，实现一套代码了多屏展示，最大限度的节省了工作量。当然也有些细节需要处理，通过使用少量的js代码和自定义CSS来实现更优的多屏展示效果。这个设计可以在PC和各种移动终端上美观的展示和播放视频。

::: hljs-center

手机端效果

:::

五、经验总结

这个项目花费了大约两周时间，很顺利，有些经验值得总结。
1)带有动态数据的网站，要做到彻底的前后端分离，这样团队工作才可以更顺畅的开展，设计、实现和维护也更轻松
2)要使用成熟的产品和框架，例如通过采用云视睿博NTV Media Sever G3流媒体服务器完全整合了视频管理和播出的细节，大大缩短了开发时间，规避了技术风险。再如通过使用Bootstrap界面框架，界面的设计工作就更加规范和统一，避免在一些界面元素效果上再反复讨论设计。
3)用好代码管理工具，通过使用git等版本管理工具做好严格的版本控制和研发协作规范。

END
有疑问联系本文作者 @北京王老师