芒果TV 平板端 以EPG（IPTV）形式复刻

技术介绍

• 使用View-App框架实现交互
• Web端，使用阿里web播放
• IPTV端，使用机顶盒播放器
• 使用webpack打包，兼容es5及之前版本
• 功能方面，暂未使用第三方库

View-App框架地址

• 官方地址
• Demo地址
• 代码地址：
  • github地址
  • gitee地址

项目地址

• 项目效果：部署地址
• 芒果项目 github地址、gitee地址

功能介绍

复刻芒果TV的主要几个页面

• 首页
  • 推荐分页
  • 综艺分页
• 搜索页-左上角进入
• 片库页-左上角进入
  • 精选分页
  • 综艺分页（类似内容列表）
• 详情页-点击内容进入

首页

• 包含推荐、综艺、电影、电视剧、少儿、动漫分页
• 每个分页为瀑布流式的，因为功能类似，只做了推荐和综艺分页

首页及推荐分页效果

• 可以通过切换顶部的标签切换分页
• 首屏的大图可以左右切换
• 第二行时历史记录
• 下方为内容展现，具体效果可以看运行效果

搜索页

• 左侧输入内容首字母，在最右侧展现结果
• 中间是对应的智能推荐

片库页

• 包含精选、综艺、电影、电视剧、少儿分页

• 瀑布流展现方式

• 精选分页
  
  精选类似一个会员页面，显示用户信息及会员权益

• 综艺分页
  
  使用内容标签来筛选内容，选择内容进入详情页

详情页

• 详情页展现内容，及相关推荐
  

• 左上角是小视屏窗，当视频开始播放，广告图片消失

• 左下角时对应的剧集列表

• 右侧是推荐内容

​