设计实现一个漂亮的视频网站

时间：2023-10-09 09:54:01 | 来源：网站运营

时间：2023-10-09 09:54:01 来源：网站运营

设计实现一个漂亮的视频网站：

一、任务描述

单位最近要设计开发一个全新的视频网站，用于存放和展示公司的宣传视频和培训视频。

具体要求是：

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) 页脚

页面设计效果如下：

在页头部分，包括了LOGO、手机扫码入口、关于和登录用户。Logo居左，功能链接放于右上，显得错落有致，也是一种常见的设计模式。

LOGO下面是分类类表，点击每个分类名称，页面上的资源卡片会动态变化，加载该分类的内容。




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




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

3.2 播放设计

视频播放原来计划在单独的页面播放，也就是点击卡片，打开一个新页面，在新页面里播放。

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

3.3 登录页面

登录页面是一个独立页面，用户访问首页、资源页，如果没有登录则会提示登录，并跳转到登录页。

登录可以使用手机号码和微信登录，这两种登录方式是可以通过后台设置进行开启和关闭的，例如只保留手机登录。

3.4 其他页面

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

四、手机观看

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

五、经验总结

这个项目花费了大约两周时间，很顺利，有些经验值得总结。

1）带有动态数据的网站，要做到彻底的前后端分离，这样团队工作才可以更顺畅的开展，设计、实现和维护也更轻松

2）要使用成熟的产品和框架，例如通过采用云视睿博NTV Media Sever G3流媒体服务器完全整合了视频管理和播出的细节，大大缩短了开发时间，规避了技术风险。再如通过使用Bootstrap界面框架，界面的设计工作就更加规范和统一，避免在一些界面元素效果上再反复讨论设计。

3）用好代码管理工具，通过使用git等版本管理工具做好严格的版本控制和研发协作规范。

-----------------------------------