手把手教你用"视频"做闪屏页

作者: 杜冷丁
github: https://github.com/watire/

一个酷炫的闪屏页, 瞬间可以抓住用户的心.
实现动画闪屏页一般有4种方式:

方式 优点 缺点
Gif 简单 帧率高时容易OOM
VectorDrawable/SVG/PATH动画 速度快,内存小 动画内容不丰富
系统动画 适合简单场景 复杂动画实现起来麻烦
视频 表现内容丰富 mp4尺寸略大

下面介绍怎么用"视频" 来做闪屏页 :
先上效果图, 很帅有木有~

相关素材来自虾米音乐

下面来教大家如何烧制这道菜:

主料:
    VideoView 适量
   
辅料:
    ViewPager 少许
    ImageView 若干
    TextView 适量
    视频文件 若干
    
做法:
    1、将VideoView去皮洗净后切块备用;
    2、额...我只是个想做厨师的程序猿,但菜谱就到这里,我已经看到围观群众已经不耐烦的咬瓜皮了。  

正经做法

  1. 由VideoView(全屏)+ImageView组成ViewPager的Item,绑定至Fragment;
  2. 将Fragment装入FragmentStatePagerAdapter
  3. 将adapter装载至viewPager;
  4. 放入适量视频文件、图片素材等佐料后起锅...(好像又跑偏了啊喂),对于viewpager fragment这些基本组件,大家应该信手拈来了,我就说说视频文件如何播放的,翻开fragment,来看看每个item都有什么(敲黑板,这个是重点):

布局:

  
  
    
    
        
      
        


fragment:

    mVideoView = findViewById(R.id.vvSplash);
    mvSlogan = findViewById(R.id.ivSlogan);
    mVideoView.setOnErrorListener(this);
    mVideoView.setOnPreparedListener(this);
    mVideoView.setVideoPath("android.resource://" + getActivity().getPackageName() + "/" + R.raw.xxx);
    mvSlogan.setImageResource(imgRes);

给videoView setVideoPath即可设置视频路径,此处加载raw文件夹中资源,实现MediaPlayer.OnPreparedListener进行播放。

    @Override
    public void onPrepared(MediaPlayer mediaPlayer) {
        if (mVideoView != null) {
            mVideoView.requestFocus();
            mVideoView.setOnCompletionListener(this);
            mVideoView.seekTo(0);
            mVideoView.start();
        }
        return;
    }

然后实现MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener来处理播放完成(控制viewpager跳转至下一页或已是最后一页,则关闭页面)和播放失败时的情况。

    @Override
    public void onCompletion(MediaPlayer mediaPlayer) {
        FragmentActivity localFragmentActivity = getActivity();
        if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
            ((FullscreenActivity) localFragmentActivity).next(position);
        }
    }

    @Override
    public boolean onError(MediaPlayer mediaPlayer, int i, int i1) {
        FragmentActivity localFragmentActivity = getActivity();
        if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
            ((FullscreenActivity) localFragmentActivity).next(position);
        }
        return true;
    }

另外,需要实现onPause() 和onResume(),在页面中断时停止播放、恢复时继续播放:

    public void onResume() {
        super.onResume();
        if (mHasPaused) {
            if (mVideoView != null) {
                mVideoView.seekTo(mVideoPosition);
                mVideoView.resume();
            }
        }
        return;
    }

    public void onPause() {
        super.onPause();
        if (mVideoView != null) {
            mVideoPosition = mVideoView.getCurrentPosition();
        }
        mHasPaused = true;
    }

在onDestroy()时停止播放(敲黑板,这个必考啊):

    public void onDestroy() {
        super.onDestroy();
        if (mVideoView != null) {
            mVideoView.stopPlayback();
        }
        return;
    }

重点就是这些了.
源码请前往github-demo!

ps. 推荐个github demo 运行神器:dryrun ,食用方法:

  1. 连接手机;
  1. 执行命令:dryrun https://github.com/watire/xiamivd.git;
  2. 等待下载、安装。

是不是很简单呢,当然要先安装dryrun~~~~~!

更多文章请关注公众号

你可能感兴趣的:(手把手教你用"视频"做闪屏页)