实现类似微博视频滚动自动播放与暂停

最近需要实现一个类似于微博内容中视频自动播放与暂停的功能。拿到这个功能后，需要把技术点细化。首先分析微博实现视频自动播放暂停的流程，拿到了我的华为荣耀7打开微博玩了半个小时。。发现当手机处于连接WiFi状态下的时候，一个item是视频的类型时，而且这个item大部分显示屏幕前时，就开始自动播放。而这个正在播放的item，离开屏幕的时候，就自动暂停。如果手机处在数据联网状态下，这个就不会给你自动播放。而且，如果细心的话，会发现当你处于滚动的状态的时候，视频是不会进行自动播放的。也就是说上面的逻辑都不走。

流程分析完了，就开始分析怎么实现的。假设微博的滚动列表是用recycleView来实现的，第一步个就需要对recycleView进行滚动的监听，第二步需要知道item控件是否显示在屏幕中了，第三步就是控制视频的开始与暂停。

接下来就开始显示第一步了，对recycleView实现滚动的监听，使用recycleView.addOnScrollListener，里面重写OnScrollStateChanged方法，方法中会返回三个状态值，分别是SCROLL_STATE_IDLE（停止滚动，静止状态），SCROLL_STATE_DRAGGING（拖动状态），SCROLL_STATE_SETTLING（惯性滑动状态），然后再重写OnScrolled方法，在里面可以通过GridLayoutManager.findFirstVisibleItemPosition来获取到在当前屏幕显示的第一个可见条目的位置和最后一个可见条目的位置，然后在用最后一个可见条目-第一个可见条目可以算出，在当前屏幕显示的总item数。

  other_recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {

                switch (newState){
                    case SCROLL_STATE_IDLE://停止滚动
                        LogUtils.e("recyclerView滚动状态---->停止滚动");
                        /**在这里执行，视频的自动播放与停止*/
                        autoPlayVideo(recyclerView);
                        break;
                    case SCROLL_STATE_DRAGGING://拖动
                        LogUtils.e("recyclerView滚动状态---->拖动");
                        break;
                    case SCROLL_STATE_SETTLING://惯性滑动
                        LogUtils.e("recyclerView滚动状态---->惯性滑动");
                        break;
                }


            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {

                LogUtils.e("recyclerView滚动距离---->x==="+dx+"-----y==="+dy);
                firstItem = manager.findFirstVisibleItemPosition();
                LastItem = manager.findLastVisibleItemPosition();
                VisiableCount = LastItem - firstItem;
                LogUtils.e("recyclerView可见条目---->第一个==="+firstItem+"-----第二个==="+LastItem+"可显示总数--->"+VisiableCount);

            }
        });

接下来就是显示autoPlayVideo()的方法，方法需要传入一个RecyclerView的对象，然后进行循环找到需要自动播放的item条目。这里使用的是JCVideoPlayer来播放视频，是github上的开源项目。接下来就是判断条目是否完全显示在屏幕上了， 这里用到了videoView.getLocalVisibleRect(Rect rect)，getLocalVisibleRect方法是获取视图本身的可见坐标区域，坐标的话，是以自己的左上角为原点。所以，当获取rect.top==0与rect.bottom==videoHeight的时候，就是判断出当前的item已经完成显示在屏幕中，这时候我们就可以实现自动的播放了。而，其他滚出屏幕的item，我们就可以把相应的资源释放掉。

/**
     * 自动播放停止视频方法
     */
    private void autoPlayVideo(RecyclerView recyclerView){


        for(int i=0;i<VisiableCount;i++){
            if(recyclerView != null && recyclerView.getChildAt(i) != null &&recyclerView.getChildAt(i).findViewById(R.id.jcv_videoplayer) != null){
                videoView = (MyJCVideoPlayerStandard) recyclerView.getChildAt(i).findViewById(R.id.jcv_videoplayer);
                Rect rect = new Rect();
                videoView.getLocalVisibleRect(rect);//获取视图本身的可见坐标，把值传入到rect对象中
                int videoHeight = videoView.getHeight();//获取视频的高度
                if(rect.top==0&&rect.bottom==videoHeight){

                    if(videoView.currentState== JCVideoPlayer.CURRENT_STATE_NORMAL||videoView.currentState==JCVideoPlayer.CURRENT_STATE_PAUSE){
			
                        videoView.startVideo();

                    }
                    return;
                }

                videoView.releaseAllVideos();

            }else{
                if(videoView!=null){
                    videoView.releaseAllVideos();
                }
            }

        }

    }

这样就可以实现了，类似微博的视频自动播放与暂停。希望可以帮助到你，加油！

实现类似微博视频滚动自动播放与暂停

猜你喜欢