截取网络视频的第一帧并显示

最新推荐文章于 2024-07-08 10:03:30 发布

aNoobCoder

最新推荐文章于 2024-07-08 10:03:30 发布

阅读量4.9k

点赞数 1

分类专栏： java

java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.web端

原理：主要是 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); 的运用，这个函数可以根据图片，视频和画布来绘制图片，详情可了解 http://www.w3school.com.cn/tags/canvas_drawimage.asp

<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <video id="video" controls="controls" width="400" height="300">
        <source src="./video/78.mp4">
    </video>
    <br>
    <br> 视频第一帧图片：
    <div id="output"></div>
    <script type="text/javascript">
        (function() {
            var video, output;
            var scale = 0.8;
            var initialize = function() {
                output = document.getElementById("output");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', captureImage);
            };
            var captureImage = function() {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,
                        canvas.height);

                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png");
                img.width = 400;
                img.height = 300;
                output.appendChild(img);
            };
            initialize();
        })();
    </script>
</body>
</html>
</i>

2.Android端

对此可使用安卓提供的MediaMetadataRetriever类，可参考如下示例

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/activity_main"
             android:layout_width="match_parent"
             android:layout_height="200dp"
             android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <VideoView
        android:id="@+id/video"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <FrameLayout
        android:id="@+id/control"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_gravity="center"
            android:id="@+id/player"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/play"/>
    </FrameLayout>

</FrameLayout>

具体代码：

public class MainActivity extends Activity {

    private ImageView mImage;
    private VideoView mVideo;
    private FrameLayout mControl;
    private ImageView mPlayer;
    private String mPlayerPath;
    private final int PLAY = 0;
    private final int PAUSE = 1;
    private final int COMPLETE = 2;
    private int state;
    private boolean isFirst = true;

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

        mImage = (ImageView) findViewById(R.id.image);
        mVideo = (VideoView) findViewById(R.id.video);
        mControl = (FrameLayout) findViewById(R.id.control);
        mPlayer = (ImageView) findViewById(R.id.player);

        mControl.setBackgroundColor(0x66000000);
        mPlayer.setVisibility(View.VISIBLE);

        mPlayerPath = Environment.getExternalStorageDirectory().getPath() + "/DCIM/Camera/VID_20161103_113849.mp4";

        initImage();

        initListener();
    }

    private void initImage() {
        mVideo.setVisibility(View.GONE);
        mImage.setVisibility(View.VISIBLE);

        /**
         * MediaMetadataRetriever class provides a unified interface for retrieving
         * frame and meta data from an input media file.
         */
        MediaMetadataRetriever mmr = new MediaMetadataRetriever();
        mmr.setDataSource(mPlayerPath);

        Bitmap bitmap = mmr.getFrameAtTime();//获取第一帧图片
        mImage.setImageBitmap(bitmap);
        mmr.release();//释放资源
    }


    private void initListener() {
        mControl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (isFirst) {
                    initVideo();
                    isFirst = false;
                } else {
                    if (mVideo.isPlaying()) {
                        mVideo.pause();
                        state = PAUSE;
                        mControl.setBackgroundColor(0x66000000);
                        mPlayer.setVisibility(View.VISIBLE);
                    } else if (state != COMPLETE) {
                        mVideo.start();
                        state = PLAY;
                        mControl.setBackgroundColor(Color.TRANSPARENT);
                        mPlayer.setVisibility(View.GONE);
                    } else {
                        mVideo.resume();//从新开始播放
                        state = PLAY;
                        mControl.setBackgroundColor(Color.TRANSPARENT);
                        mPlayer.setVisibility(View.GONE);
                    }
                }
            }
        });
    }

    private void initVideo() {
        mVideo.setVisibility(View.VISIBLE);
        mImage.setVisibility(View.GONE);
        mVideo.setVideoPath(mPlayerPath);

        mVideo.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mVideo.start();
                state = PLAY;
                mControl.setBackgroundColor(Color.TRANSPARENT);
                mPlayer.setVisibility(View.GONE);
            }
        });

        mVideo.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                state = COMPLETE;
                mControl.setBackgroundColor(0x66000000);
                mPlayer.setVisibility(View.VISIBLE);
            }
        });
    }
}