芒果TV 平板端 以EPG(IPTV)形式复刻

技术介绍

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

项目地址

  • View-App github地址、gitee地址
  • 芒果项目 github地址、gitee地址

功能介绍

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

  • 首页
    • 推荐分页
    • 综艺分页
  • 搜索页-左上角进入
  • 片库页-左上角进入
    • 精选分页
    • 综艺分页(类似内容列表)
  • 详情页-点击内容进入
首页
  • 包含推荐、综艺、电影、电视剧、少儿、动漫分页
  • 每个分页为瀑布流式的,因为功能类似,只做了推荐和综艺分页

首页及推荐分页效果

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

  • 左侧输入内容首字母,在最右侧展现结果
  • 中间是对应的智能推荐
片库页
  • 包含精选、综艺、电影、电视剧、少儿分页

  • 瀑布流展现方式

  • 精选分页

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

  • 综艺分页

    使用内容标签来筛选内容,选择内容进入详情页

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

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

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

  • 右侧是推荐内容

你可能感兴趣的:(IPTV,EPG,芒果复刻,git,github,前端框架)