短视频 App
一、内容及要求
整体要求
1.任务:开发一个短视频 App
2.API:https://beiyou.bytedance.com/api/invoke/video/invoke/video
3.使用 RecyclerView 显示视频列表(一页显示多个 item)
4.使用 Glide 加载封面图
必要功能:
1.从视频信息流点击某个视频封面进入播放页面
2.根据视频信息的 url 播放视频
3.单击视频窗口暂停/继续
二、小组分工
略
三、主要思路
1.在和 RecyclerView 的同级布局文件中,在右下角放置一个隐藏 FrameLayout,当正在播放的列表滑出界面的时候,将右下角的 FragmeLayout 设置为显示,并将播放的 SurfaceView 添加到右下角的 FragmeLayout 播放。
2.在列表的 ViewHolder 布局文件中放置一个 FragmeLayout,当点击播放按钮时,将 SurfaceView 添加到 FragmentLayout 中播放。
3.为 RecyclerView 设置 addOnChildAttachStateChangeListener 事件,这个监听有两个重要的方法。
四、布局:
1.首先看下主界面布局代码。
可以在布局文件中看到,在右下角中放置了一个隐藏的 FrameLayout,当正在播放的列表滑出界面时我们会使用这个 FrameLayout 来放置播放视频的 SurfaceView。
2.在 RecyclerView 中的 item 布局文件中也有一个 FrameLayout。
item 中这个 FrameLayout 用于点击列表中播放按钮将要播放的 SurfaceView 添加到这个 FrameLayout 中。
五、设置监听:
为 RecyclerView 添加 addOnChildAttachStateChangeListener 监听,当正在播放的 item 滑出界面时会回调 onChildViewDetachedFromWindow 这个方法,我们在这个方法中判断如果 FragmeLayout 中有视频播放,将右下角的 FrameLayout 设置为显示,移除 item 布局中的 SurfaceView 并将其添加到右下角的 FrameLayout,将记录这个 item 的位置,当再次将这个 item 滑动到界面中时,会回调 onChildViewAttachedToWindow 这个方法。同理再将这个右下角中的 FrameLayout 中的 SurfaceView 移除并设置为隐藏,再将 SurfaceView 添加到 item 中的 FrameLayout 播放。
六、实现效果:
1.主体界面设计为 RecyclerView 列表模式,每个列表有一个含有 Glide 显示的封面图片,视频和图片均来自要求的 API 网址。
2.点击三角形播放按钮,播放其中一个视频,封面图片隐去,开始播放视频,并出现进度条,可以随时调整观看视频进度。
3.若对视频没有操作,视频会保持播放状态,并隐藏播放进度条和暂停按钮,以达到最好的观看效果,点击视频任意位置可以唤出进度条和暂停按钮,随时对视频进行操作。
4.下拉列表,会看到很多网络视频,当正在播放的视频划出屏幕,会在右下角出现小窗口(画中画)观看视频,当点击播放另一个视频时,正在播放的视频会停止播放。