视频在技术发展中发挥着至关重要的作用。随着互联网的普及和带宽的增加，视频已成为人们获取信息、娱乐和交流的重要方式之一。建设功能丰富、内容优质的视频网站对于满足用户需求、推动行业发展具有重要意义。

1.网站分类

1、推荐：在网站首页展示热门、新发布的视频，让用户第一时间了解精彩内容。

2、分类：根据不同类型的视频进行分类，如电影、电视剧、纪录片、综艺、动画等，每个类别还可以根据不同的类型、时间、地区等进一步细分。

3.热门/排行榜：展示最热门的视频，让用户发现和观看最热门的内容。

4、搜索：提供强大的搜索功能，允许用户根据关键词搜索感兴趣的视频。

5、弹幕评论：提供用户评论和弹幕功能，让用户可以与他人互动、分享观点、交流。

6、用户频道：允许用户创建个人频道，上传分享自己的视频作品，激发用户创造力和参与度。

7、VIP会员：提供付费订阅服务，享受高清、无广告、优质内容等特权。

2、技术选型

1）前端：jquery + Bootstrap界面框架，可以快速设计出漂亮的效果。重点是页面布局风格以及如何让大家喜欢。

2）后端：Nginx + PHP + MySQL，这个没有太多讨论的必要，技术已经很成熟了。前端和后端完全分离。后端向前端提供Restful API接口。前端通过接口获取数据并渲染。

3）视频服务器：NTV Media Serve G3是一个非常成熟且易于使用的视频平台。转播效果流畅高效。它集成了多个接口，实现上传、截图、转码、播放、管理等功能。这也是成功的重要组成部分

3. 设计细节

重点是前端设计和实现，这是最耗时、最耗精力的部分。

**确认页面包括：

主要页面：Home页面（主页）、播放页面、个人页面、资源管理页面、登录页面；

二级页面：关于

跳转页面：公司主页、公司内部网站

经过分析，我们认为，对于一个视频网站来说，应该尽可能减少二级页面的数量，而视频的展示和播放，以及“关于”信息的展示，都应该可以在首页上进行。确定之后，页面简化为以下三个：

首页：资源展示、视频播放、关于

个人页面：显示和修改个人信息

资源管理页面：上传和管理视频资源，编辑视频资源信息

3.1 首页设计

首页显示的信息包括：

1）标题、LOGO、登录用户信息、**访问入口、关于

2）资源分类名称

3）资源列表，以卡片的形式展示资源信息。卡片包括封面、标题、副标题、大小、码率等信息。

4) 页脚

页面设计效果如下：

页眉部分包括LOGO、**扫码入口、关于和登录用户。标志放在左侧，功能链接放在右上方，看起来层次分明，也是常见的设计模式。

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

页面的卡片部分显示了很多信息，包括：封面、标题、大小、市场、码率、分辨率、上传时间、浏览量等。不过由于是卡片式的显示，所以看起来也很简洁。

页脚的设计采用常见的居中方式，不再详细介绍。

3.2 回放设计

视频播放原本计划是单独页面播放，即点击卡片打开新页面，在新页面中播放。

经过分析，我们发现播放页面并没有太多的扩展服务，只是播放视频。所以我们认为还是放在首页以弹窗的形式来播放比较好。用户无需打开新页面即可播放，避免了多个页面之间的跳转和跳跃。关闭操作。

3.3 登录页面

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

您可以使用**号和微信登录。这两种登录方式可以通过后台设置开启和关闭。例如只保留**登录名。

3.4 其他页面

资源管理和用户个人页面也是用卡片的方式展示，就不赘述了。

4. **观看

**页面利用Bootstrap界面框架的自适应优势，根据屏幕尺寸自动调整布局和元素大小，实现了一套代码即可实现多屏显示，最大程度地节省了工作量。当然，还有一些细节需要处理，通过少量的js代码和自定义CSS就可以实现更好的多屏显示效果。这种设计可以在PC和各种移动终端上精美地显示和播放视频。

五、经验总结

这个项目历时两周左右，进展非常顺利。有些经验值得总结。

1）动态数据的网站必须前后端完全分离，这样团队工作才能更顺利地进行，设计、实现和维护也更容易。

2）使用成熟的产品和框架。例如，NTV Media Sever G3流媒体服务器充分融合了视频管理和播出的细节，大大缩短了开发时间，避免了技术风险。又比如，通过使用Bootstrap界面框架，界面设计工作更加规范和统一，避免了对某些界面元素效果的重复设计讨论。

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

一个成功的视频网站通过细致的栏目分类和优质的内容，为用户提供便捷的观看体验和丰富的视频选择，推动互联网的发展和视频行业的繁荣。通过**，用户可以随时随地观看不同类型的视频内容，以更加多元化、便捷的方式获取信息和娱乐。