Android播放器拖动进度条的小图预览

已于 2023-07-27 11:18:57 修改
阅读量1.8k 收藏 8
点赞数 1
文章标签： android java 音视频 预览 SeekBar
于 2023-05-31 15:21:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tracydragonlxy/article/details/129590715
版权

Android播放器拖动进度条的小图预览

背景

我们在使用一些播放器时，拖动进度条会有一个预览框，上一篇博客Android SeekBar控制视频播放进度(一)实现了拖动进度条调节播放进度的功能，今天我们继续完善上一篇博客的功能，增加小图预览功能。效果图如下：

效果图

在这里插入图片描述
请添加图片描述

关键代码

1. 获取指定位置的视频帧

MediaMetadataRetriever是Android原生提供的获取音视频文件信息的一个类，我们可以通过这个类的相关方法获取一些基本信息，如视频时长、宽高、帧率、方向、某一帧的图片等。

进入界面时我们开启一个子线程，以1秒的时间间隔提前把视频中的图片截取好。拖动滑动条时，只需根据当前的位置，找到最近的已经提前截取好的某帧图片即可。

为了减少内存占用，可以把截取的预览图的分辨率设置的小一些。

// 指定视频源
mmr = new MediaMetadataRetriever();
mmr.setDataSource(this, Uri.parse("android.resource://"
        + getApplicationContext().getPackageName() + "/" + R.raw.vid_bigbuckbunny));


mVideoView.setVideoURI(Uri.parse("android.resource://"
        + getApplicationContext().getPackageName() + "/" + R.raw.vid_bigbuckbunny));

mVideoView.requestFocus();

// 视频加载完成回调函数
mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
    @Override
    public void onPrepared(MediaPlayer mp) {
        mp.setLooping(true);

		// 获取视频的长度
        MAX_PROGRESS = mVideoView.getDuration();
        mSeekBar.setMax((int) MAX_PROGRESS);

		// 计算按照1s截取预览图，一共有多少张预览图
        bitmaps = new Bitmap[(int) (MAX_PROGRESS / 1000) + 1];
        Log.i(TAG, "onCreate: " + MAX_PROGRESS + "," + curProgress + "," + bitmaps.length);
        // 提前截取预览图，1s的时间间隔截取，用于快进时显示
        getPreviewImage();

        // 开始线程，更新进度条的进度
        handler.postDelayed(runnable, 0);
        mVideoView.start();
    }
});

private void getPreviewImage() {
    new Thread(new Runnable() {
        @Override
        public void run() {
            for (int i = 0; i < bitmaps.length - 1; i++) {
                if (refreshFlag) {
                    // 获取当前快进帧图像的bitmap对象 单位是微秒
                    // 压缩图片，减少内存占用
                    bitmaps[i] = Bitmap.createScaledBitmap(
                            mmr.getFrameAtTime(i * 1000 * 1000L,
                                    MediaMetadataRetriever.OPTION_PREVIOUS_SYNC),
                            PREVIEW_IMG_WIDTH,
                            PREVIEW_IMG_HEIGHT,
                            true);
                    Log.i(TAG, "run: " + bitmaps[i].getByteCount());
                }
            }
        }
    }).start();

}

2. 预览图的显示和隐藏

监听SeekBar的回调函数onProgressChanged，onStartTrackingTouch，onStopTrackingTouch。触摸函数onStartTrackingTouch触发时暂停视频播放，小窗预览图显示，onProgressChanged调节进度过程中，不停的更新预览图信息，停止调节进度onStopTrackingTouch时继续从当前位置播放视频，同时隐藏小窗预览图。

mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        Log.i(TAG, "onProgressChanged: " + progress);
        if (isSeekBarProgress) {
            updateProgress(progress);
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        isSeekBarProgress = true;
        Log.i(TAG, "onStartTrackingTouch: " + mVideoView.isPlaying());
        if (mVideoView.isPlaying()) {
            mVideoView.pause();
            updatePreviewStatus(true);
        }
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        Log.i(TAG, "onStopTrackingTouch: ");
        int pro = seekBar.getProgress();
        mVideoView.seekTo(pro);
        if (!mVideoView.isPlaying()) {
            mVideoView.seekTo(pro);
            mVideoView.start();
            updatePreviewStatus(true);
        }
        isSeekBarProgress = false;
    }
});

private void updateProgress(int pro) {
    curProgress = pro;

    if (curProgress >= MAX_PROGRESS) {
        curProgress = MAX_PROGRESS - 10;
    } else if (curProgress < 0) {
        curProgress = 0;
    }

    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            mCardView.setVisibility(View.VISIBLE);
            mImageViewPreview.setImageBitmap(bitmaps[(int) (curProgress / 1000)]);
        }
    });

}

private void updatePreviewStatus(final boolean b) {
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            mCardView.setVisibility(b ? View.VISIBLE : View.INVISIBLE);
        }
    });
}

完整代码

1. xml布局文件activity_video.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:keepScreenOn="true"
    tools:context=".activitys.VideoActivity">

    <VideoView
        android:id="@+id/video_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="500dp"
        android:layout_height="25dp"
        android:background="@drawable/bg_rounded"
        android:layout_marginBottom="45dp"
        android:progressTint="#7FFFD4"
        android:thumbTint="#7FFFD4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!--<ImageView
        android:id="@+id/iv_preview"
        android:layout_width="200dp"
        android:layout_height="180dp"
        android:visibility="invisible"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>-->

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="20dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        android:visibility="invisible"
        app:layout_constraintBottom_toTopOf="@id/seekbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageView
            android:id="@+id/iv_preview"
            android:layout_width="192dp"
            android:layout_height="108dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

2. Activity文件VideoActivity.java

public class VideoActivity extends AppCompatActivity {

    private static final String TAG = "VideoActivity";

    private VideoView mVideoView;
    private SeekBar mSeekBar;
    private ImageView mImageViewPreview;
    private CardView mCardView;

    private float curProgress;
    private float MAX_PROGRESS;

    private MediaMetadataRetriever mmr;
    private Bitmap[] bitmaps;
    private static final int PREVIEW_IMG_WIDTH = 192;
    private static final int PREVIEW_IMG_HEIGHT = 108;

    private boolean isSeekBarProgress = false;

    private Handler handler = new Handler();

    private Runnable runnable = new Runnable() {

        public void run() {

            if (mVideoView.isPlaying()) {
                if (!isSeekBarProgress) {
                    int current = mVideoView.getCurrentPosition();
                    mSeekBar.setProgress(current);
                }
            }
            handler.postDelayed(runnable, 100);

        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video);

        mmr = new MediaMetadataRetriever();
        mmr.setDataSource(this, Uri.parse("android.resource://"
                + getApplicationContext().getPackageName() + "/" + R.raw.vid_bigbuckbunny));

        mSeekBar = findViewById(R.id.seekbar);
        mImageViewPreview = findViewById(R.id.iv_preview);
        mVideoView = findViewById(R.id.video_view);
        mCardView = findViewById(R.id.cardView);
        mVideoView.setVideoURI(Uri.parse("android.resource://"
                + getApplicationContext().getPackageName() + "/" + R.raw.vid_bigbuckbunny));
//        MediaController mediaController = new MediaController(this);
//        mVideoView.setMediaController(mediaController);

        mVideoView.requestFocus();

        mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mp.setLooping(true);

                MAX_PROGRESS = mVideoView.getDuration();
                mSeekBar.setMax((int) MAX_PROGRESS);

                bitmaps = new Bitmap[(int) (MAX_PROGRESS / 1000) + 1];
                Log.i(TAG, "onCreate: " + MAX_PROGRESS + "," + curProgress + "," + bitmaps.length);
                // 提前截取预览图，1s的时间间隔截取，用于快进时显示
                getPreviewImage();

                // 开始线程，更新进度条的进度
                handler.postDelayed(runnable, 0);
                mVideoView.start();
            }
        });

        mVideoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                curProgress = 0;
                mSeekBar.setProgress(0);
            }
        });

mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        Log.i(TAG, "onProgressChanged: " + progress);
        if (isSeekBarProgress) {
            updateProgress(progress);
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        isSeekBarProgress = true;
        Log.i(TAG, "onStartTrackingTouch: " + mVideoView.isPlaying());
        if (mVideoView.isPlaying()) {
            mVideoView.pause();
            updatePreviewStatus(true);
        }
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        Log.i(TAG, "onStopTrackingTouch: ");
        int pro = seekBar.getProgress();
        mVideoView.seekTo(pro);
        if (!mVideoView.isPlaying()) {
            mVideoView.seekTo(pro);
            mVideoView.start();
            updatePreviewStatus(true);
        }
        isSeekBarProgress = false;
    }
});

    }

    private void getPreviewImage() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i = 0; i < bitmaps.length - 1; i++) {
                    if (refreshFlag) {
                        // 获取当前快进帧图像的bitmap对象 单位是微秒
                        // 压缩图片，减少内存占用
                        bitmaps[i] = Bitmap.createScaledBitmap(
                                mmr.getFrameAtTime(i * 1000 * 1000L,
                                        MediaMetadataRetriever.OPTION_PREVIOUS_SYNC),
                                PREVIEW_IMG_WIDTH,
                                PREVIEW_IMG_HEIGHT,
                                true);
                        Log.i(TAG, "run: " + bitmaps[i].getByteCount());
                    }
                }
            }
        }).start();

    }

    @Override
    protected void onResume() {
        super.onResume(); 
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        handler.removeCallbacks(runnable);
        mmr.release();
        mmr.close();
    }

    private void updateProgress(int pro) {
        curProgress = pro;

        if (curProgress >= MAX_PROGRESS) {
            curProgress = MAX_PROGRESS - 10;
        } else if (curProgress < 0) {
            curProgress = 0;
        }

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mCardView.setVisibility(View.VISIBLE);
                mImageViewPreview.setImageBitmap(bitmaps[(int) (curProgress / 1000)]);
            }
        });

    }

    private void updateSeekBarStatus(final boolean b) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mSeekBar.setPressed(b);
            }
        });
    }

    private void updatePreviewStatus(final boolean b) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mCardView.setVisibility(b ? View.VISIBLE : View.INVISIBLE);
            }
        });
    }
}
tracydragonlxy
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义进度条拖动,Android播放器拖动进度条的小图预览
weixin_35975406的博客
05-25 1292
播放器拖动预览，让用户提前了解视频的波澜迭起情节，先走马观花看一遍精彩部分，满足一下好奇心，这就是拖动预览的意义所在。那么我们该如何打造高性能、高效率、高可靠的拖动预览呢？首先，小图预览强调足够小，因为预览画面分辨率没必要高清，分辨率越小解码速度越快、占用内存与CPU资源越低；其次，硬解优先，绑定Surface，解码后直接渲染到Surface上；另外，不必要解码音频，视频帧也可以选择性解码，比如只...
Android拖动进度条画面随动,视频画中画效果，拖动进度条可以seek到相应视频帧显示...
weixin_35826493的博客
05-26 2005
在视频开发中，我们常常看到这样的效果，拖动进度条时，或是在进度条上方或是在屏幕中间，显示拖动进度条位置时刻的某一帧画面。这个需求，如果是你，你会如何做？通常一个需求，不仅要考虑实现，还有考虑一些是否有性能上影响。下面我想到的4个方案：1、在拖动过程中，可以通过TextureView来显示预览图，拖动进度条到某个position后，通过textureView.getBitmap()拿到对应的截图，用...
Android 快速制作一个YouTube 拖动进度视屏预览功能
a
03-22 402
Android 快速制作一个YouTube 拖动进度视屏预览功能
Android应用开发mediaplayer播放音频，带有进度条
08-08
这是一个简单的带有进度条的mediaplayer音频播放器demo，只有一个按键，用来播放和暂停。进度条可以通过拖动来改变播放的进度。供Android初学者参考
Android 播放器中容易用到的进度条（音量控制，播放进度）
mmdev
08-07 597
播放器中的的两个常用的进度条， 1，显示当前播播放器中的的两个常用的进度条， 1，显示当前播放进度 2，显示当前音量 package rw.test; import java.io.IOException; import android.app.Activity; import android.media.AudioManager; import android.media.Medi...
Android_播放器的进度条
e891377的专栏
07-10 728
package com.itheima.musicplayer;import java.io.File; import java.io.IOException; import java.util.Timer; import java.util.TimerTask;import android.app.Activity; import android.media.AudioManager;
Android 播放器中容易用到的进度条[音量控制，播放进度]
GrimRaider的专栏
03-19 2455
转自：Android 播放器中容易用到的进度条[音量控制，播放进度] 1，显示当前播放进度 2，显示当前音量 package rw.test; import java.io.IOException; importAndroid.app.Activity; import android.media.Aud
Android拖动进度条画面随动,Android seekbar实现可拖动进度条
weixin_33983809的博客
05-26 546
本文实例为大家分享了Android seekbar实现可拖动进度条的具体代码，供大家参考，具体内容如下SeekBar通过滑块的位置来标识数值 允许用户通过拖动滑块来改变进度值的大小控件：SeekBar两个TextView 显示状态实现SeekBar.OnSeekBarChangeListener接口 对事件进行监听xml文件：android:layout_width="match_parent"a...
GSYVideoPlayer:视频播放器（IJKplayer、ExoPlayer、MediaPlayer），HTTPS，支持弹幕，外挂字幕，支持滤镜、水印、gif截图，片头广告、中间广告，多个同时播放，支持基本的拖动，声音、亮度调节，支持边播边缓存，支持视频自带rotation的旋转（90,270之类），重力旋转与手动旋转的同步支持，支持列表播放 ，列表全屏动画，视频加载速度，列表小窗口支持拖动，动画效果，调整比例，多分辨率切换，支持切换播放器，进度条小窗口预览，列表切换详情页面无缝播放，rtsp、con
05-10
基于（兼容系统MediaPlayer与EXOPlayer2），实现了多功能的视频播放器。 (请仔细阅读下方各项说明，大多数问题可在下方找到解答)。 类型 功能 缓存 边播边缓存，使用了；ExoPlayer使用SimpleCache。 协议 h263\4\5、...
android自定义可拖动进度条
02-20
http://blog.csdn.net/yanjunhui2011/article/details/56016414 对应资源 该自定义组件的优势： 1、使用简单； 2、可随意改变圆点、直线的颜色和大小； 当然，也许你会吐槽，系统不是提供了 seekBar 吗，怎么不用 seekBar。
Android开发实现进度条效果，SeekBar的简单使用。音量，音乐播放进度，视频播放进度等
09-10
博文介绍：http://blog.csdn.net/qq_21376985/article/details/52494574 Android开发实现进度条效果，SeekBar的简单使用。音量，音乐播放进度，视频播放进度等
android音乐播放器中的进度条（音量控制+进度）
08-05
android音乐播放器中的进度条（音量控制+进度）
安卓综合音乐播放器带进度条
12-02
一个综合的音乐播放器，带进度条播放，可更改APP主题颜色，四大主题，可自动扫描本地音乐，可设置喜爱歌曲，
android自定义环形进度条（类似仪表盘）
01-05
可以使用Android Studio的布局预览和模拟器来辅助调试。 以上是创建一个自定义环形进度条的关键步骤。通过理解并掌握这些知识点，开发者可以创建出具有个性化视觉效果和流畅动画的环形进度条，增强应用的用户体验。...
Android入门：简单视频进度条
最新发布
L9102fun的博客
09-06 1033
继续学习Android，使用监听和消息处理来实现一个简单的视频进度条。
[Android] SeekBar---可拖动进度条
baijiaozhan8157的博客
03-21 160
[Android] SeekBar---可拖动进度条 SeekBar---可拖动进度条 （1）setMax //设置SeekBar最大数值 （2）setProgress //设置S...
Android 可拖动进度条：SeekBar之自定义进度条
qq654783742的专栏
06-23 664
目录 一、自定义进度条样式  二、自定义滑块样式 一、自定义进度条样式 1、方式一  我们还可以找到 progress_horizontal.xml的内容，大致如下，我们只需要对该内容进行修改即可以改变进度条的背景颜色以及进度条的颜色了。 layer-list xmlns:android="http://schemas.android.com/apk/res/and
Android音乐播放器进度条实现教程
"这篇文章主要讲解如何在Android平台上实现音乐播放器的进度条效果，通过具体的代码实例展示了如何利用MediaPlayer、SeekBar和Timer等组件来完成这一功能。提供的代码示例包括XML布局文件和Java代码，旨在帮助开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值