嵌入 ViewPager 的视频播放器

作者: cpacm | 来源:发表于2018-09-11 14:50 被阅读96次

    这次的目标是实现一个能够播放视频的轮播器,即每个页面都能放置视频且能随页面的切换实现视频的切换。这个需求类似于在ListView中实现小视频的播放和切换,核心内容是怎么将视频播放器与控件的状态变化连接在一起。

    视频播放器

    实现思路

    • 使用 ViewPager 进行轮播
    • 使用 MediaPlayer 对视频进行播放
    • 使用 TextureView 展示视频界面

    具体实现

    为了提高性能,当然不能为每一页配置一个 MediaPlayer 用来播放视频,那么最好的解决方法是当页面切换时切换 MediaPlayer 的播放源。利用 ViewPager.OnPageChangeListener 监听轮播器的页面切换。

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (first && positionOffset == 0 && positionOffsetPixels == 0) {
                onPageSelected(position);
                first = false;
            }
        }
    
        @Override
        public void onPageSelected(int position) {
            //从缓存的视图中找到当前视图并传递给扩展的MediaPlayer进行控制
            View view = cacheView.get(position);
            mMediaPlayer.playWithVideoLayout(view);
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    

    在每一页的 view 中需要有 TextureView 用来显示视频界面,同时利用 TextureView.SurfaceTextureListener监听当前TextureView的可用性。SurfaceTextureListener接口用于让TextureView的使用者知道SurfaceTexture已准备好,这样就可以把SurfaceTexture交给相应的内容源。

    TextureView可用于承载显示『数据流』的场合,之前看到『流』不太明确其意义,这里给两个具体的场景大家体会一下:camera模块从sensor采集了1080p@30fps的预览数据『流』,视频通话模块从网络包里解出实时视频数据『流』。

    public class VpVideoView extends TextureView implements TextureView.SurfaceTextureListener, MediaPlayer.OnVideoSizeChangedListener {
    
        //some params
    
        private Uri mSource;//视频源
        private Surface surface;//用于承接播放器
        private VPMediaPlayer mediaPlayer;//视频播放器
    
        // some methods
    
        public void setMediaPlayer(VPMediaPlayer mediaPlayer) {
            this.mediaPlayer = mediaPlayer;
        }
    
        public void initSource(String videoPath) {
            mSource = Uri.parse(videoPath);
        }
    
        public void setSeekProgress(int seekProgress) {
            this.seekProgress = seekProgress;
        }
    
    
        @Override
        protected void onDetachedFromWindow() {
            // release resources on detach
            super.onDetachedFromWindow();
        }
    
        /*
         * TextureView.SurfaceTextureListener
         */
        @Override
        public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int width, int height) {
            if (mSource == null) return;
            surface = new Surface(surfaceTexture);
            if (mediaPlayer != null) {
                mediaPlayer.replayWithCurrentLayout();
            }
        }
    
    
        @Override
        public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
        }
    
        @Override
        public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
            if (mediaPlayer != null) {
                mediaPlayer.pause();
            }
            return true;
        }
    
        @Override
        public void onSurfaceTextureUpdated(SurfaceTexture surface) {
        }
    
    
        @Override
        public void onVideoSizeChanged(MediaPlayer mp, int width, int height) {
            mVideoHeight = mp.getVideoHeight();
            mVideoWidth = mp.getVideoWidth();
            updateViewViewSize();
            updateTextureViewSizeCenter();
        }
    
        /**
         * 让控件大小适配视频大小
         */
        private void updateViewViewSize() {
            float sx = (float) getMeasuredWidth() / (float) mVideoWidth;
            int height = (int) (sx * mVideoHeight);
            setMeasuredDimension(MeasureSpec.makeMeasureSpec(getMeasuredWidth(), MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
            postInvalidate();
        }
    
        //重新计算video的显示位置,让其全部显示并据中
        private void updateTextureViewSizeCenter() {
    
            float sx = (float) getMeasuredWidth() / (float) mVideoWidth;
            float sy = (float) getMeasuredHeight() / (float) mVideoHeight;
            Matrix matrix = new Matrix();
            //第1步:把视频区移动到View区,使两者中心点重合.
            matrix.preTranslate((getMeasuredWidth() - mVideoWidth) / 2, (getMeasuredHeight() - mVideoHeight) / 2);
            //第2步:因为默认视频是fitXY的形式显示的,所以首先要缩放还原回来.
            matrix.preScale(mVideoWidth / (float) getMeasuredWidth(), mVideoHeight / (float) getMeasuredHeight());
            //第3步,等比例放大或缩小,直到视频区的一边和View一边相等.如果另一边和view的一边不相等,则留下空隙
            if (sx >= sy) {
                matrix.postScale(sy, sy, getMeasuredWidth() / 2, getMeasuredHeight() / 2);
            } else {
                matrix.postScale(sx, sx, getMeasuredWidth() / 2, getMeasuredHeight() / 2);
            }
            setTransform(matrix);
            postInvalidate();
        }
    }
    
    

    这个类主要有以下几个功能:(1)使用Texture来展示视频流;(2)记录视频源和播放进度(注意当view被销毁时进度也会重置,所有如果需要进度不随ViewPager的缓存机制影响要另做保存);(3)利用 MediaPlayer.OnVideoSizeChangedListener 调整视频长与宽;(4)利用 SurfaceTextureListener监听TextureView是否可用。当判断可用时开始启动MediaPlayer播放视频。

    在另一方面,需要对MediaPlayer做一些处理,以便做视频的切换播放。

    public class VPMediaPlayer extends MediaPlayer implements
            MediaPlayer.OnCompletionListener,
            MediaPlayer.OnErrorListener,
            MediaPlayer.OnPreparedListener {
    
        //some params
    
        public VPMediaPlayer(SimpleViewPager simpleViewPager) {
            this.simpleViewPager = simpleViewPager;
    
            setLooping(false);
            setOnPreparedListener(this);
            setOnCompletionListener(this);
            setOnErrorListener(this);
    
        }
    
        //some methods
    
        @Override
        public void start() throws IllegalStateException {
            super.start();
            seekTo(videoView.getSeekProgress());
        }
    
        public void playWithVideoLayout() {
            isScrolling = false;
            try {
                reset();
                setOnVideoSizeChangedListener(videoView);
                setDataSource(videoView.getContext(), videoView.getmSource());
                setSurface(videoView.getSurface());
                prepareAsync();
            } catch (NullPointerException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        public void replayWithCurrentLayout() {
            simpleViewPager.stopAutoScroll();
            isScrolling = false;
            try {
                reset();
                setOnVideoSizeChangedListener(videoView);
                setDataSource(videoView.getContext(), videoView.getmSource());
                setSurface(videoView.getSurface());
                prepareAsync();
            } catch (NullPointerException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        public void pauseCurrentVideoLayout() {
            simpleViewPager.startAutoScroll(true);
            isScrolling = true;
        }
    
        @Override
        public void pause() throws IllegalStateException {
            super.pause();
            if (videoView != null) {
                videoView.setSeekProgress(getCurrentPosition());
            }
        }
    
        @Override
        public void onCompletion(MediaPlayer mp) {
            simpleViewPager.startAutoScroll(true);
            isScrolling = true;
        }
    
        @Override
        public boolean onError(MediaPlayer mp, int what, int extra) {
            simpleViewPager.startAutoScroll(true);
            isScrolling = true;
            reset();
            return false;
        }
    
        @Override
        public void onPrepared(MediaPlayer mp) {
            start();
        }
    
        public boolean isScrolling() {
            return isScrolling;
        }
    }
    

    VPMediaPlayer 主要处理一些播放器的逻辑,主要功能包括:(1)提供视频的播放暂停功能;(2)能够在视频播放结束后自动切换到下一页。

    结束语

    整个部分暂时没有添加视频控制的功能和UI,但有了主要的核心代码其他的功能添加起来应该都是水到渠成的事。

    相关文章

      网友评论

        本文标题:嵌入 ViewPager 的视频播放器

        本文链接:https://www.haomeiwen.com/subject/dalegftx.html