本文是Android项目“类抖音视频播放器”的实现,具体项目及要求请点击查看。

一、相关技术

  1. Android 编程

  2. Java 语言编程

  3. Android Glide 载入图片

  4. Android ViewPager2 单页列表上下滑动展示

  5. Android SmartRefreshLayout 下拉刷新,上划LoadMore

  6. Android VideoView 视频播放

  7. Android LottieAnimation 动画,线性动画,动画集合,插值

  8. Android 自定义Layout,继承RelativeLayout

  9. Android 布局

  10. Android 单双击事件

  11. Android 多线程,网络API编程

  12. Android Retrofit JSON 解析

  13. Git和Github的使用

二、系统功能需求

开发一个短视频App

  1. 视频信息流列表显示(包含封面图)

    • 类似抖音全屏item(即一页就一个)显示视频
    • 使用Glide加载封面图
    • 显示每个视频必要的信息(比如作者等)
  2. 视频播放

    • 从视频信息流点击某个视频封面进入播放页面
    • 根据视频信息的url播放视频
    • 单击视频窗口暂停/继续
    • 双击视频窗口弹出点赞爱心图标
  3. 额外其他功能

三、系统设计与实现

1、总体设计、系统组成

绘图2

2、模块设计和模块关系

绘图4

3、关键代码

  1. 视频信息JavaBean,用来存储从网络上获取的视频信息

    点击查看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    public class VideoInfo {
    @SerializedName("_id")
    public String id;
    @SerializedName("feedurl")
    public String url;
    @SerializedName("nickname")
    public String nickname;
    @SerializedName("description")
    public String description;
    @SerializedName("likecount")
    public String likeCount;
    @SerializedName("avatar")
    public String avatar;

    @Override
    public String toString() {
    return "VideoInfo{" +
    "id='" + id + '\'' +
    ", url='" + url + '\'' +
    ", nickname='" + nickname + '\'' +
    ", description='" + description + '\'' +
    ", likeCount='" + likeCount + '\'' +
    ", avatar='" + avatar + '\'' +
    '}';
    }
    }
  2. 贝塞尔动画估值器

    点击查看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    public class Evaluator implements TypeEvaluator<PointF> {
    //估值器
    private PointF p1;
    private PointF p2;

    public Evaluator(PointF p1, PointF p2) {
    super();
    this.p1 = p1;
    this.p2 = p2;
    }

    @Override
    public PointF evaluate(float fraction, PointF p0, PointF p3) {
    PointF pointf = new PointF();

    // 贝塞尔曲线公式: p0*(1-t)^3 + 3p1*t*(1-t)^2 + 3p2*t^2*(1-t) + p3^3
    pointf.x = p0.x * (1 - fraction) * (1 - fraction) * (1 - fraction)
    + 3 * p1.x * fraction * (1 - fraction) * (1 - fraction)
    + 3 * p2.x * fraction * fraction * (1 - fraction)
    + p3.x * fraction * fraction * fraction;
    pointf.y = p0.y * (1 - fraction) * (1 - fraction) * (1 - fraction)
    + 3 * p1.y * fraction * (1 - fraction) * (1 - fraction)
    + 3 * p2.y * fraction * fraction * (1 - fraction)
    + p3.y * fraction * fraction * fraction;
    return pointf;
    }
    }

  3. 点赞爱心动画

    点击查看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    public void addLoveView(float x, float y) {
    if (x < 100) {
    x = 101;
    }
    if (y < 100) {
    y = 101;
    }
    // 获取心形图片中心位置
    width = (int) (x - 100);
    height = (int) (y - 100);
    // 新建心形图片
    final ImageView imageView = new ImageView(context);
    params = new LayoutParams(200, 200);
    imageView.setLayoutParams(params);
    imageView.setImageDrawable(icons[new Random().nextInt(4)]);
    addView(imageView);
    // 开启动画,动画结束移除图片
    AnimatorSet set = getAnimatorSet(imageView);
    set.start();
    set.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
    super.onAnimationEnd(animation);
    removeView(imageView);
    }
    });
    }

  4. 下拉刷新和上划LoadMore

    点击查看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 下拉刷新
    refreshLayout.setOnRefreshListener(new OnRefreshListener() {
    @Override
    public void onRefresh(@NonNull RefreshLayout refreshLayout) {
    list.clear();
    getData();
    refreshLayout.finishRefresh();
    }
    });
    // 上划LoadMore
    refreshLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
    @Override
    public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
    getData();
    refreshLayout.finishLoadMore();
    }
    });

  5. 网络请求

    点击查看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    private void getData() {
    Retrofit retrofit = new Retrofit.Builder()
    .baseUrl("https://beiyou.bytedance.com/")
    .addConverterFactory(GsonConverterFactory.create())
    .build();

    ApiService apiService = retrofit.create(ApiService.class);

    apiService.getVideoInfo().enqueue(new Callback<List<VideoInfo>>() {
    // 请求成功
    @Override
    public void onResponse(Call<List<VideoInfo>> call, Response<List<VideoInfo>> response) {
    if (response.body() != null) {
    List<VideoInfo> videoInfoList = response.body();
    Log.d("wxy", videoInfoList.toString());
    if (videoInfoList.size() != 0) {
    list.addAll(videoInfoList);
    myAdapter.setData(list);
    myAdapter.notifyDataSetChanged();
    }
    }
    }
    // 请求失败
    @Override
    public void onFailure(Call<List<VideoInfo>> call, Throwable t) {
    Log.d("retrofit", t.getMessage());
    }
    });

    }

  6. Glide载入图片

    点击查看代码
    1
    2
    3
    4
    5
      Glide.with(context)
    .load(list.get(position).avatar)
    .error(R.mipmap.load_error)
    .transition(withCrossFade())
    .into(holder.imageView);

四、系统可能的扩展

在本系统的基础上还具有很高的拓展性。

  1. 在查看老师给的视频API时,发现这个API过于老旧,并且视频与视频信息对应不上,导致APP的最终显示效果并不是那么理想。在本系统的基础上,如果能提供新视频API,在每次发出GET请求时,返回的视频列表都是不同的,并且数据也是随时间更新的,这样就可以真正地实现抖音的效果,无限上划刷新或者下拉刷新,每次的视频都不一样。
  2. 还可以在本系统的基础上修改界面,这个界面只是基础的显示视频信息的界面,并不是像抖音那样的更为美观的界面,可以进一步美化界面,增加各种动画。
  3. 也可以增加注册登录系统,使用数据库等记录不同用户点赞的数据,个性化推荐视频。
  4. 还可以实现视频拍摄录制,上传到服务器,这样就能在本地获取到自己上传的视频。
  5. ……

五、总结体会

本系统是一个类似抖音的网络短视频APP,基于Android和Java开发。在开发的过程中,我和我的另一个伙伴(两人一组合作开发)经过上网查找资料,Debug反复调试,克服了重重困难,终于成功的完成了这个APP。移动互联网是PC和互联网发展的必然产物,他将移动通信和互联网二者结合起来,成为一体。随着现在5G技术的快速发展,6G甚至都已经开始研究,这样移动网络APP开发必然是一种趋势。无论是短视频APP,例如抖音、快手,还是视频弹幕APP,例如BiliBili、爱奇艺等,还有即时通讯APP,例如QQ、微信、飞书,甚至是游戏APP,例如王者荣耀等,都离不开移动互联网,由此也可以看出移动互联网的重要性。以后移动互联网的发展将会比现在更快,在他基础上萌发出的新型产业也将层出不穷,基于移动互联网的高新科技也一定会迅速兴起,包括AI、智能家庭等等。移动互联网总是各个领域都扮演着不可或缺的角色,总之移动互联网这门课让我学到了很多新知识,收获很多。

六、项目地址

本项目的源码、可执行程序均已经存放于我的Github,欢迎下载查看:

评论




博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

载入天数...载入时分秒...