在滚动列表中播放视频

发表于 5年以前  | 总阅读数:1755 次

原文链接 : Implementing video playback in a scrolled list (ListView & RecyclerView)

本篇博文将会介绍如何实现在列表中播放视频,具体效果参见:Facebook,Instagram 或 Magiston:

Facebook:

Magisto:

Instagram:

博文内容基于此Github 项目:VideoPlayerManager.

博文中涉及的所有代码和范例都在该项目中,所以本篇博文不会详细讲解每一个细节。如果有人真的想知道实现的机制,最好是下载源码,结合 IDE 边看源码边阅读本文。不过就算你不结合源码,光看我在这里说的内容,也能理解的七七八八了。

两个问题

为了实现这个功能,我们需要解决以下两个问题:

  1. 管理视频播放。在 Android 框架层中我们可以利用 MediaPlayer 和 SurfaceView 来播放视频,但这种实现方式有许多缺点。我们不能在列表中使用一般的 VideoView,因为 VideoView 是 SurfaceView 的子类,而 SurfaceView 不具有 UI 异步缓存。而这会导致我们无法在滚动时记录视频到底播放到哪个时间点。TextureView 具有 UI 异步缓存,但在 Android SDK 15 没有 VideoView 的实现方式是借助 TextureView 来完成的。因此,我们需要一个 TextureView 的子类与 MediaPlayer 协作完成视频播放的功能。当然了,MediaPlayer 中的所有方法(准备,开始,停止等等……)几乎都是调用与硬件交互的内核层代码。而硬件往往意味着复杂,如果我们需要完成的任何工作的耗时超过 16ms(一般都会),就会看到滞后的视频列表。这也是为什么需要在后台线程中调用它们的原因。

  2. 我们还需要知道滚动列表中的哪一个 View 要被激活(播放视频),所以我们还需要追踪用户的滚动行为并定义可见域最大的 View。

管理视频播放

我们希望提供以下功能:

假设某个视频正在播放,此时用户滚动了列表使得列表中某个子项目的可见域大于正在播放视频的子项目的可见域,这样我们就需要停止正在播放的视频,并开始播放新的视频(可见域更大的子项目对应的视频)。

VideoPlayerView

我们要做的第一件事就是以 TextureView 为父类实现 VideoView。而且我们在滚动列表中不能使用系统的 VideoView,因为用户在视频播放的过程中滚动列表的话,视频渲染就会乱掉。

我把这部分工作分为几个部分:

  1. 创建继承于 TextureView 的 ScalableTextureView,它能够调整 SurfaceTexture(正在播放视频的表面结构中)而且提供了一些类似于 ImageView 缩放类型的选项。
public enum ScaleType {
    CENTER_CROP, TOP, BOTTOM, FILL
}
  1. 创建 ScalableTextureView 的子类 VideoPlayerView,它包含所有与 MediaPlayer 相关的功能。即,这是一个封装了 MediaPlayer 并提供与 VideoView 几近一致的 API 的自定义 View。VideoPlayerView 具有所有直接调用 MediaPlayer 的方法:setDataSource,prepare, start, stop, pause, reset, release。

ViedioPlayer 管理器及消息控制机制

视频播放管理器与负责异步调用 MediaPlayer 方法的 MessageHandlerThread 协作。因为我们需要调用的方法,如:prepare(), start() 等等……与硬件直接相关,所以我们需要在一个独立的线程中完成这些调用。此外,当我们在 UI 线程中调用 MediaPlayer.reset() MediaPlayer 会发生一些奇怪的问题,使得该方法阻塞了将近 4 分钟!这也是我们不必须调用异步的 MediaPlayer.prepareAsync() 方法的原因,因为我们完全可以在另一个线程中调用 MediaPlayer.prepare() 方法,免得让这些奇怪的问题折腾自己。因此,我们将在一个独立的线程中异步完成所有任务。

在开始新的视频播放任务的事件流中,下面是一些与 MediaPlayer 相关的步骤:

  1. 停止前一个播放任务,通过调用 MediaPlayer.stop() 方法完成。

  2. 通过调用 MediaPlayer.reset 方法重置 MediaPlayer。之所以需要这样做是因为:在滚动列表中,View 可能会被重用,而我们想要释放所有的资源。

  3. 通过调用 MediaPlayer.release() 方法释放 MediaPlayer 占用的资源。

  4. 清除 MediaPlayer 的实例,当 View 执行新的播放任务时,创建新的 MediaPlayer 实例。

  5. 为新的可见域最大的 View 创建 MediaPlayer 实例。

  6. 调用 MediaPlayer.setDataSource(String url) 为新的 MediaPlayer 设置数据源。

  7. 调用 MediaPlayer.prepare() 方法而不是 MediaPlayer.prepareAsync()。

  8. 调用 MediaPlayer.start()。

  9. 等待播放开始。

以上所有行为都被包裹到 Message 中,交给一个独立的线程完成,例如这是一个 Stop 命令的 Message,它将调用 VideoPlayerView.stop(),实际上他调用的是 MediaPlayer.stop()。我们需要自定义 Message,因为我们可能需要设置当前状态,例如现在是正在停止,还是已经停止,或者是其他的状态……这有助于我们了解当前处理的 Message 是什么命令,如果我们需要用这个命令的话我们可以做什么,例如,开始一个新的播放任务。

/**
 * This PlayerMessage calls {@link MediaPlayer#stop()} on the instance that is used inside {@link VideoPlayerView}
 */
public class Stop extends PlayerMessage {
    public Stop(VideoPlayerView videoView, VideoPlayerManagerCallback callback) {
        super(videoView, callback);
    }

    @Override
    protected void performAction(VideoPlayerView currentPlayer) {
        currentPlayer.stop();
    }

    @Override
    protected PlayerMessageState stateBefore() {
        return PlayerMessageState.STOPPING;
    }

    @Override
    protected PlayerMessageState stateAfter() {
        return PlayerMessageState.STOPPED;
    }
}

如果我们需要开始一个新的播放任务,我们只需要调用 VideoPlayerManager 的一个方法,它就会添加下列 Message 到 MessagesHandlerThread 中:

// pause the queue processing and check current state
// if current state is "started" then stop old playback
mPlayerHandler.addMessage(new Stop(mCurrentPlayer, this));
mPlayerHandler.addMessage(new Reset(mCurrentPlayer, this));
mPlayerHandler.addMessage(new Release(mCurrentPlayer, this));
mPlayerHandler.addMessage(new ClearPlayerInstance(mCurrentPlayer, this));
// set new video player view
mPlayerHandler.addMessage(new SetNewViewForPlayback(newVideoPlayerView, this));
// start new playback
mPlayerHandler.addMessages(Arrays.asList(
        new CreateNewPlayerInstance(videoPlayerView, this),
        new SetAssetsDataSourceMessage(videoPlayerView, assetFileDescriptor, this), // I use local file for demo
        new Prepare(videoPlayerView, this),
        new Start(videoPlayerView, this)
));
// resume queue processing

这些 Message 都是异步处理的,因此我们能在任意时刻停止消息队列对消息的处理,并投递新的消息,例如:

当前一个影片处于准备状态(已经调用了 MediaPlayer.prepare() 方法,而且 MediaPlayer.start() 方法正在消息队列中等待被执行),此时用户滚动了列表,所以我们需要在一个新的 View 上开始新的播放任务。在这种情况下我们会:

  1. 停止正在执行的消息队列

  2. 移除所有等待执行的消息

  3. 投递 “Stop”, “Reset”, “Release”, “Clear Player instance” 这些消息给消息队列,它们将会在 Prepare 消息回调方法执行完成后立刻被执行。

  4. 投递 “Create new Media Player instance”, “Set Current Media Player”(将 MediaPlayer 对象绑定到当前需要播放视频的消息上),“Set data source”, “Prepare”, “Start”等消息。这样就会在新的 View 上播放相应的视频。

这样我们就能依照我们设想的那样执行播放任务:停止前一个播放任务,并开始新的播放任务。

下面是相关的依赖:

dependencies {
    compile 'com.github.danylovolokh:video-player-manager:0.2.0'
}

区分列表中可见域最大的 View——列表可见域判断工具

第一个问题是控制视频的播放,第二个问题则是判断哪一个 View 可见域最大,并切换该 View 对应的视频为新的播放视频。下面是调用 ListItemsVisibilityCalculator 的实体,它的具体实现 SingleListViewItemActiveCalculator 会完成对应的工作。

在 Adapter 中被使用的 Model 类必须实现 ListItem 接口,以计算 List 中子项目的可见域:

/**
 * A general interface for list items.
 * This interface is used by {@link ListItemsVisibilityCalculator}
 *
 * @author danylo.volokh
 */
public interface ListItem {
    /**
     * When this method is called, the implementation should provide a
     * visibility percents in range 0 - 100 %
     * @param view the view which visibility percent should be
     * calculated.
     * Note: visibility doesn't have to depend on the visibility of a
     * full view. 
     * It might be calculated by calculating the visibility of any
     * inner View
     *
     * @return percents of visibility
     */
    int getVisibilityPercents(View view);

    /**
     * When view visibility become bigger than "current active" view
     * visibility then the new view becomes active.
     * This method is called
     */
    void setActive(View newActiveView, int newActiveViewPosition);

    /**
     * There might be a case when not only new view becomes active,
     * but also when no view is active.
     * When view should stop being active this method is called
     */
    void deactivate(View currentView, int position);
}

ListItemsVisibilityCalculator 将追踪滚动方向,并在运行时计算子项目的可见域。子项目的可见域依赖于列表中的任意一个咨询项目,即取决于你实现 getVisibilityPercents() 方法的方式:

/**
 * This method calculates visibility percentage of currentView.
 * This method works correctly when currentView is smaller then it's enclosure.
 * @param currentView - view which visibility should be calculated
 * @return currentView visibility percents
 */
@Override
public int getVisibilityPercents(View currentView) {

    int percents = 100;

    currentView.getLocalVisibleRect(mCurrentViewRect);

    int height = currentView.getHeight();

    if(viewIsPartiallyHiddenTop()){
        // view is partially hidden behind the top edge
    percents = (height - mCurrentViewRect.top) * 100 / height;
    } else if(viewIsPartiallyHiddenBottom(height)){
        percents = mCurrentViewRect.bottom * 100 / height;
    }

    return percents;
}

因此,每一个 View 都需要知道计算其可见域的细节。当发生滚动时,SingleListViewItemActiveCalculator 会要求每一个 View 计算其可见域大小,这也意味其开销之重。

当任意一个子项目的可见域大小超过了当前播放视频项目的可见域大小,就会调用 setActive 方法切换播放任务。

下面是与 Adapter 功能类似的的 ItemsPositionGetter 的抽象逻辑,它将建立 ListItemsVisibilityCalculator 与 ListView/RecyclerView 交互的桥梁。这样的话 ListItemsVisibilityCalculator 不需要了解它需要操作的 View 到底是 ListView 还是 RecyclerView。只需要完成它自己的工作,但仍需要一些由 ItemsPositionGetter 提供的信息。

/**
 * This class is an API for {@link ListItemsVisibilityCalculator}
 * Using this class is can access all the data from RecyclerView / 
 * ListView
 *
 * There is two different implementations for ListView and for 
 * RecyclerView.
 * RecyclerView introduced LayoutManager that's why some of data moved
 * there
 *
 * Created by danylo.volokh on 9/20/2015.
 */
public interface ItemsPositionGetter {

   View getChildAt(int position);

    int indexOfChild(View view);

    int getChildCount();

    int getLastVisiblePosition();

    int getFirstVisiblePosition();
}

这样的实现无疑会让 Model 类混入一些业务逻辑,违反了设计模式的部分原则。但通过一些简单的修改就能将它们解耦。不过现在这样它用起来也没多大的问题。

下面是预览图和依赖:

dependencies {
    compile 'com.github.danylovolokh:list-visibility-utils:0.2.0'
}

组合使用上面完成的工作

现在我们需要将上面的工具库结合起来使用以完成我们的功能,下面是使用 RecyclerView 实现的代码:

  1. 初始化 ListItemsVisibilityCalculator,并传递列表的引用
/**
 * Only the one (most visible) view should be active (and playing).
 * To calculate visibility of views we use {@link SingleListViewItemActiveCalculator}
 */
private final ListItemsVisibilityCalculator mVideoVisibilityCalculator = new SingleListViewItemActiveCalculator(
new DefaultSingleItemCalculatorCallback(), mList);

当被激活(播放视频)的 View 发生改变,DefaultSingleItemCalculatorCallback 只调用 ListItem.setActive 方法,但你可以重载该方法并按照你的需求实现相应逻辑:

/**
 * Methods of this callback will be called when new active item is found {@link Callback#activateNewCurrentItem(ListItem, View, int)}
 * or when there is no active item {@link Callback#deactivateCurrentItem(ListItem, View, int)} - this might happen when user scrolls really fast
 */
public interface Callback<T extends ListItem>{
    void activateNewCurrentItem(T item, View view, int position);
    void deactivateCurrentItem(T item, View view, int position);
}
  1. 初始化 VideoPlayerManager
/**
 * Here we use {@link SingleVideoPlayerManager}, which means that only one video playback is possible.
 */
private final VideoPlayerManager<MetaData> mVideoPlayerManager = new SingleVideoPlayerManager(new PlayerItemChangeListener() {
    @Override
    public void onPlayerItemChanged(MetaData metaData) {

    }
});
  1. 为 RecyclerView 设置滚动监听,并传递滚动事件给列表可见工具库处理。
@Override
public void onScrollStateChanged(RecyclerView view, int scrollState) {
 mScrollState = scrollState;
 if(scrollState == RecyclerView.SCROLL_STATE_IDLE && mList.isEmpty()){

 mVideoVisibilityCalculator.onScrollStateIdle(
          mItemsPositionGetter,
          mLayoutManager.findFirstVisibleItemPosition(),
          mLayoutManager.findLastVisibleItemPosition());
 }
 }

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
 if(!mList.isEmpty()){
   mVideoVisibilityCalculator.onScroll(
         mItemsPositionGetter,
         mLayoutManager.findFirstVisibleItemPosition(),
         mLayoutManager.findLastVisibleItemPosition() -
         mLayoutManager.findFirstVisibleItemPosition() + 1,
         mScrollState);
 }
}
});
  1. 创建 ItemsPositionGetter
ItemsPositionGetter mItemsPositionGetter = 
new RecyclerViewItemPositionGetter(mLayoutManager, mRecyclerView);
  1. 在 onResume() 中调用方法以开始计算子项目的可见域,在我们显示出列表时选出可见域最大的子项目
@Override
public void onResume() {
    super.onResume();
    if(!mList.isEmpty()){
        // need to call this method from list view handler in order to have filled list

        mRecyclerView.post(new Runnable() {
            @Override
            public void run() {

                mVideoVisibilityCalculator.onScrollStateIdle(
                        mItemsPositionGetter,
                        mLayoutManager.findFirstVisibleItemPosition(),
                        mLayoutManager.findLastVisibleItemPosition());

            }
        });
    }
}

然后就完成了,在滚动列表中播放许多视频:

这个项目关键部分的讲解基本上已经完成了,下面是具体的代码和范例:

https://github.com/danylovolokh/VideoPlayerManager

感谢阅读 ;)

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:1年以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:1年以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:1年以前  |  398次阅读  |  详细内容 »
 相关文章
简化Android的UI开发 5年以前  |  521240次阅读
Android 深色模式适配原理分析 4年以前  |  29635次阅读
Android阴影实现的几种方案 2年以前  |  12221次阅读
Android 样式系统 | 主题背景覆盖 4年以前  |  10293次阅读
 目录