一步步自定义视频播放器——使用SurfaceView播放视频

程序员文章站 2022-03-30 13:50:47

...

Surface

Surface与SurfaceView这篇文章对Surface和SurfaceView做了很详细的解释。

简单的说Surface对应了一块屏幕缓冲区，每个window对应一个Surface，任何View都要画在Surface的Canvas上。传统的view共享一块屏幕缓冲区，所有的绘制必须在UI线程中进行。

Surface可以理解为： Surface类似一个句柄，可以得到Canvas、原始缓冲区以及其他方面的内容。
Canvas用于画图
原始缓冲区用于保存当前窗口的像素数据

SurfaceView

SurfaceView继承自View，但它有自己的Surface。

 if (mWindow == null) {    
         mWindow = new MyWindow(this);    
         mLayout.type = mWindowType;    
         mLayout.gravity = Gravity.LEFT|Gravity.TOP;    
         mSession.addWithoutInputChannel(mWindow, mWindow.mSeq, mLayout,    
         mVisible ? VISIBLE : GONE, mContentInsets);     
   }

源码表明，SurfaceView会自己创建一个MyWindow，一个window对应一个Surface，因此SurfaceView也就内嵌了一个自己的Surface。

传统View及其派生类的更新只能在UI线程，然而UI线程还同时处理其他交互逻辑，这就无法保证View更新的速度和帧率了，而SurfaceView可以用独立的线程进行绘制，因此可以提供更高的帧率，例如游戏，摄像头取景等场景就比较适合SurfaceView来实现。

SurfaceHolder

SurfaceHolder是一个接口，其作用就像一个关于Surface的监听器，提供访问和控制SurfaceView内嵌的Surface相关的方法。
它通过三个回调方法，让我们可以感知到Surface的创建、销毁或者改变。
在SurfaceView中有一个方法getHolder，可以很方便地获得SurfaceView内嵌的Surface所对应的监听器接口SurfaceHolder。
SurfaceHolder.Callback主要是当底层的Surface被创建、销毁或者改变时提供回调通知，由于绘制必须在Surface被创建后才能进行，因此SurfaceHolder.Callback中的surfaceCreated 和surfaceDestroyed 就成了绘图处理代码的边界。
SurfaceHolder.Callback中定义了三个接口方法：

abstract void surfaceChanged(SurfaceHolder holder, int format, int width, int height)：当surface发生任何结构性的变化时（格式或者大小），该方法就会被立即调用。
abstract void surfaceCreated(SurfaceHolder holder)：当surface对象创建后，该方法就会被立即调用。
abstract void surfaceDestroyed(SurfaceHolder holder)：当surface对象在将要销毁前，该方法会被立即调用。

小结

SurfaceView是一个拥有独立绘图层的特殊View
Surface是内存中的一段绘图缓冲区
SurfaceView中具有两个Surface，即双缓冲机制
SurfaceHolder是Surface的持有者，SurfaceView就是通过过SurfaceHolder来对Surface进行管理控制的。并且SurfaceView.getHolder方法可以获取SurfaceView相应的SurfaceHolder。
Surface是在SurfaceView所在的Window可见的时候创建的。我们可以使用SurfaceHolder.addCallback方法来监听Surface的创建与销毁的事件。

从设计模式的高度来看，Surface、SurfaceView和SurfaceHolder实质上就是广为人知的MVC，即Model-View-Controller。
Model就是模型的意思，或者说是数据模型，或者更简单地说就是数据，也就是这里的Surface；
View即视图，代表用户交互界面，也就是这里的SurfaceView；
SurfaceHolder很明显可以理解为MVC中的Controller（控制器）。

SurfaceView与MediaPlayer结合

SurfaceView解析视频的流程：首先确定视频的格式，知道编码格式后，通过编码格式进行解码，得到一帧一帧的图像，并把这些图像快速的显示在界面上。
简单地说，SurfaceView用来显示MediaPlayer中解析得到的视频图像。
MediaPlayer通过setDisplay（SurfaceHolder sh）来指定SurfaceView显示图像。

SurfaceView双缓冲

SurfaceView和大部分视频应用一样，把视频解析成的一帧帧图像进行显示。如果把这个解析放在一个线程中完成，可能在上一帧显示后，下一帧来不及解析，导致画面不流畅或者视频不同步。通过双缓冲机制来显示图像能够有效解决上述问题。
双缓冲机制可以理解为两个线程轮番解析视频流的帧图像，当一个线程解析完帧图像后，把图像渲染到界面中，同时另外一个线程开始解析下一帧图像，使得两个线程轮番配合区解析视频流，达到流畅播放的效果。

注意

　SurfaceView内部实现了双缓冲的机制，但是实现这个功能是非常消耗系统内存的。因为移动设备的局限性，Android在设计的时候规定，SurfaceView如果为用户可见的时候，创建SurfaceView的SurfaceHolder，如果发现SurfaceView变为用户不可见的时候，则立即销毁SurfaceView的SurfaceHolder，以达到节约系统资源的目的。

如果开发人员不对SurfaceHolder进行维护，会出现最小化程序后，再打开应用的时候，视频的声音在继续播放，但是不显示画面了的情况，这就是因为当SurfaceView不被用户可见的时候，之前的SurfaceHolder已经被销毁了，再次进入的时候，界面上的SurfaceHolder已经是新的SurfaceHolder了。所以SurfaceHolder需要我们开发人员去编码维护，维护SurfaceHolder需要用到上述的三个回调方法。

小例子

使用的时候注意要配置权限

    <uses-permission android:name="android.permission.INTERNET" />

使用步骤为：
1.创建 MediaPlayer，并让他加载指定的视频文件
2.在布局中定义SurfaceView组件，或者在程序中创建SurfaceView组件
3.为SurfaceView的SurfaceHolder添加Callback监听器
4.调用MediaPlayer对象的setDisplay(SurfaceHolder sh)将所播放的视频图像输出到指定的SurfaceView组件中
5.调用MediaPlayer对象的start(),stop(),和pause()方法。

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化
        mediaPlayer = new MediaPlayer();
        surfaceView = findViewById(R.id.surface_view);
        //设置屏幕常亮
        surfaceView.getHolder().setKeepScreenOn(true);
        //添加回调接口
        surfaceView.getHolder().addCallback(callback);
    }

     public void play() {
        try {
            mediaPlayer.reset();//重置
            mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
            mediaPlayer.setDataSource(URL);//设置播放路径 
            mediaPlayer.setDisplay(surfaceView.getHolder());//视频输出到SurfaceView上
            mediaPlayer.prepare();//使用同步方式
            mediaPlayer.start();//开始播放

        } catch (IOException e) {
            e.printStackTrace();
            Toast.makeText(MainActivity.this, "路径错误", Toast.LENGTH_SHORT).show();
        }
    }

完整代码

package com.example.com.myapplication;

import android.media.AudioManager;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Toast;

import java.io.IOException;

public class MainActivity extends AppCompatActivity {
    private SurfaceView surfaceView;
    private MediaPlayer mediaPlayer;
    private String URL = "http://fairee.vicp.net:83/2016rm/0116/baishi160116.mp4";
    private int position;//记录位置

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化
        mediaPlayer = new MediaPlayer();
        surfaceView = findViewById(R.id.surface_view);
        //设置屏幕常亮
        surfaceView.getHolder().setKeepScreenOn(true);
        //添加回调接口
        surfaceView.getHolder().addCallback(callback);
    }


    private SurfaceHolder.Callback callback = new SurfaceHolder.Callback() {
        @Override
        public void surfaceCreated(SurfaceHolder holder) {

        }

        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

        }

        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            if (mediaPlayer != null && mediaPlayer.isPlaying()) {
                position = mediaPlayer.getCurrentPosition();
                mediaPlayer.stop();
            }

        }
    };

    public void play() {
        try {
            mediaPlayer.reset();//重置
            mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
            //raw文件夹下面的内容
//            Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.baishi);
//            mediaPlayer.setDataSource(this, uri);
            mediaPlayer.setDisplay(surfaceView.getHolder());
            mediaPlayer.setDataSource(URL);
            //视频输出到SurfaceView上

            mediaPlayer.prepare();//使用同步方式
            mediaPlayer.start();//开始播放

        } catch (IOException e) {
            e.printStackTrace();
            Toast.makeText(MainActivity.this, "路径错误", Toast.LENGTH_SHORT).show();
        }
    }

    public void start(View view) {
        play();
    }

    public void pause(View view) {
        if (mediaPlayer.isPlaying()) {
            mediaPlayer.pause();
            position = mediaPlayer.getCurrentPosition();
        }
    }

    public void goOn(View view) {
        mediaPlayer.seekTo(position);
        mediaPlayer.start();
    }

    public void stop(View view) {
        if (mediaPlayer.isPlaying()) {
            mediaPlayer.stop();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mediaPlayer.isPlaying()) {
            mediaPlayer.pause();
            position = mediaPlayer.getCurrentPosition();

        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        //释放资源
        if (mediaPlayer != null && mediaPlayer.isPlaying()) {
            mediaPlayer.stop();
            mediaPlayer.release();
        }
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.com.myapplication.MainActivity">

    <SurfaceView
        android:id="@+id/surface_view"
        android:layout_width="match_parent"
        android:layout_height="400dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="start"
            android:text="播放" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="pause"
            android:text="暂停" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="goOn"
            android:text="继续" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="stop"
            android:text="停止" />
    </LinearLayout>
</LinearLayout>

实现效果：
一步步自定义视频播放器——使用SurfaceView播放视频

SurfaceView结合MediaPlayer使用
 SurfaceView与Surface
SurfaceView播放视频

一步步自定义视频播放器——使用SurfaceView播放视频

Surface

SurfaceView

SurfaceHolder

小结

SurfaceView与MediaPlayer结合

SurfaceView双缓冲

注意

小例子

ios开发-搭建自定义的视频播放器

如何使用Kmplayer播放器预览eMule未下载完视频文件

云朵播放器怎么下载视频？云朵播放器使用教程

魔力视频播放器的使用教程

Android 视频播放器JieCaoVideoPlayer使用(防今日头条视频预加载)

视频.MP4使用 SurfaceView一个小视频的播放

魔力视频播放器moliplayer怎么导入视频及其使用

ESFSoft Media Player视频播放器使用图文教程

在WordPress中安装使用视频播放器插件Hana Flv Player

宅男宅女播放器如何下载种子视频?宅男宅女播放器使用教程