在胶子应用程序中嵌入原生视频视图 [英] Embed native video view in gluon app

问题描述

我应该为iOS和Android编写一个应用程序，有时会在屏幕的一部分上显示自定义的视频播放器。我必须能够控制它（寻找，播放，暂停，设定速度，选择视频......）。我知道Gluon还不支持这样的媒体。

I'm supposed to write an app for iOS and Android that sometimes shows a customized video player on a part of the screen. I have to be able to control it (seek, play, pause, set speed, choose video...). I know that such media is not yet supported in Gluon.

但是可以在XCode和Android Studio中编写这样的东西并以某种方式将其嵌入到Gluon应用程序中？

But would it be possible to write such a thing in XCode and Android Studio and somehow embed it in a Gluon app?

推荐答案

遵循Gluon Charm Down的设计模式库，这可能是 VideoService 的基本Android实现。

Following the design patterns in the Gluon Charm Down library, this could be a basic Android implementation of a VideoService.

它基于此教程，适用于JavaFX使用的当前 SurfaceView 。它将创建一个 TextureView ，它将放置在当前视图顶部的屏幕中心，占据其宽度的95％。

It is based on this tutorial, and adapted to be used on the current SurfaceView that JavaFX uses. It will create a TextureView that will be placed on the center of the screen, on top of the current view, taking the 95% of its width.

使用IDE的Gluon插件，创建一个单视图项目。

With the Gluon plugin for your IDE, create a Single View Project.

1. 将这两个类放在源包下，包 com.gluonhq.charm.down.plugins ：

1. Place these two classes under Source Packages, package com.gluonhq.charm.down.plugins:

VideoService界面

package com.gluonhq.charm.down.plugins;

public interface VideoService {
    void play(String videoName);
    void stop();
    void pause();
    void resume();
}

VideoServiceFactory class

package com.gluonhq.charm.down.plugins;

import com.gluonhq.charm.down.DefaultServiceFactory;

public class VideoServiceFactory extends DefaultServiceFactory<VideoService> {

    public VideoServiceFactory() {
        super(VideoService.class);
    }

}

1. Android软件包：将此类放在Android / Java软件包下，软件包 com.gluonhq.charm.down.plugins.android ：

1. Android Package: Place this class under Android/Java Packages, package com.gluonhq.charm.down.plugins.android:

AndroidVideoService类

package com.gluonhq.charm.down.plugins.android;

import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.graphics.SurfaceTexture;
import android.media.MediaMetadataRetriever;
import android.media.MediaPlayer;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Surface;
import android.view.TextureView;
import android.view.WindowManager;
import android.widget.RelativeLayout;
import com.gluonhq.charm.down.plugins.VideoService;
import java.io.IOException;
import javafxports.android.FXActivity;

public class AndroidVideoService implements VideoService, TextureView.SurfaceTextureListener {
    private static final String TAG = AndroidVideoService.class.getName();
    private MediaPlayer mMediaPlayer;
    private String videoName;

    private final RelativeLayout relativeLayout;
    private final TextureView textureView;
    private final DisplayMetrics displayMetrics;

    public AndroidVideoService() {
        displayMetrics = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) FXActivity.getInstance().getSystemService(Context.WINDOW_SERVICE);
        windowManager.getDefaultDisplay().getMetrics(displayMetrics);

        relativeLayout = new RelativeLayout(FXActivity.getInstance());

        textureView = new TextureView(FXActivity.getInstance());
        textureView.setSurfaceTextureListener(this);
        relativeLayout.addView(textureView);
    }

    @Override
    public void play(String videoName) {
        this.videoName = videoName;
        stop();
        FXActivity.getInstance().runOnUiThread(() -> {
            FXActivity.getViewGroup().addView(relativeLayout);
        });
    }

    @Override
    public void stop() {
        if (mMediaPlayer != null) {
            mMediaPlayer.stop();
            mMediaPlayer.release();
            mMediaPlayer = null;
        }
        if (relativeLayout != null) {
            FXActivity.getInstance().runOnUiThread(() -> {
                FXActivity.getViewGroup().removeView(relativeLayout);
            });
        }
    }

    @Override
    public void pause() {
        if (mMediaPlayer != null) {
            mMediaPlayer.pause();
        }
    }

    @Override
    public void resume() {
        if (mMediaPlayer != null) { 
            mMediaPlayer.start();
        }
    }

    @Override
    public void onSurfaceTextureAvailable(SurfaceTexture st, int i, int i1) {
        Surface surface = new Surface(st);
        try {
            AssetFileDescriptor afd = FXActivity.getInstance().getAssets().openFd(videoName);
            calculateVideoSize(afd);
            mMediaPlayer = new MediaPlayer();
            mMediaPlayer.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
            mMediaPlayer.setSurface(surface);
            mMediaPlayer.setLooping(true);
            mMediaPlayer.prepareAsync();
            mMediaPlayer.setOnPreparedListener(mediaPlayer -> mediaPlayer.start());

        } catch (IllegalArgumentException | SecurityException | IllegalStateException | IOException e) {
            Log.d(TAG, e.getMessage());
        }
    }

    @Override public void onSurfaceTextureSizeChanged(SurfaceTexture st, int i, int i1) { }
    @Override public boolean onSurfaceTextureDestroyed(SurfaceTexture st) { return true; }
    @Override public void onSurfaceTextureUpdated(SurfaceTexture st) { }

    private void calculateVideoSize(AssetFileDescriptor afd) {
        try {
            MediaMetadataRetriever metaRetriever = new MediaMetadataRetriever();
            metaRetriever.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
            String height = metaRetriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT);
            String width = metaRetriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH);
            double factor = Double.parseDouble(width) > 0 ? Double.parseDouble(height) / Double.parseDouble(width) : 1d;
            // 95% screen width
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams((int) (0.95 * displayMetrics.widthPixels), 
                    (int) (0.95 * displayMetrics.widthPixels * factor));
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            textureView.setLayoutParams(lp);
        } catch (NumberFormatException e) {
            Log.d(TAG, e.getMessage());
        }
    }
}

1. 样本

将视频文件放在android / assets文件夹中，如 big_buck_bunny。 mp4 ，可以从这里。

Place a video file in the android/assets folder, like big_buck_bunny.mp4, that can be downloaded from here.

BasicView

public class BasicView extends View {

    private boolean paused;

    public BasicView(String name) {
        super(name);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setNavIcon(MaterialDesignIcon.MENU.button());
        appBar.setTitleText("Video View");
        // big_buck_bunny.mp4 video in src/android/assets:
        Services.get(VideoService.class).ifPresent(video -> {
            appBar.getActionItems().add(MaterialDesignIcon.PLAY_ARROW.button(e -> video.play("big_buck_bunny.mp4")));
            appBar.getActionItems().add(MaterialDesignIcon.PAUSE.button(e -> {
                if (!paused) {
                    video.pause();
                    paused = true;
                } else {
                    video.resume();
                    paused = false;
                }
            }));
            appBar.getActionItems().add(MaterialDesignIcon.STOP.button(e -> video.stop()));
        });
    }

}

在Android设备上部署并测试：

Deploy on your Android device and test:

请注意，TextureView将位于顶部，直到您按下停止按钮将其删除。

Note that the TextureView will be on top until you remove it by pressing the stop button.

这篇关于在胶子应用程序中嵌入原生视频视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！