代号One-缩放，居中和裁剪视频以强制其占据整个屏幕 [英] Codename One - Zoom, center and crop a video to force it to occupy all the screen

问题描述

我在 BorderLayout 的中心中有一个介绍性视频，选项为 BorderLayout 。CENTER_BEHAVIOR_TOTAL_BELOW。

I have an intro video in the center of a BorderLayout with the option BorderLayout.CENTER_BEHAVIOR_TOTAL_BELOW. In the top I have a logo, in the south I have login buttons.

我编写类似于以下代码的代码，根据以下内容选择正确的视频：设备。我测试了视频是否会自动缩放到可用空间：在我测试的智能手机（Android和iPhone型号）中，视频覆盖了整个屏幕区域（因为视频的长度和高度与屏幕的长度和高度成比例） 。很好，这正是我想要的。

I write code similar to the following one, that chooses the right video according the rotation of the device. I tested that the video will be automatically zoomed to the available space: in the smartphones that I tested (Android and iPhone models), the video covers all the screen area (because the video length and height are proportional to the screen length and height). That's good, it's exactly what I want.

但是，可能有些智能手机的屏幕尺寸比例与我测试过的不同。而且，所有平板电脑的屏幕尺寸比例都与智能手机不同。

However, probably there are smartphones with different screen size ratio from the ones that I tested. Moreover, all the tablets have different screen size ratio from the smartphones.

我需要视频始终占据所有屏幕区域。如有必要，应自动缩放，居中并裁剪以占据整个屏幕。

I need that the video will ALWAYS occupy all the screen area. If necessary, it should be automatically zoomed, centered and cropped to occupy all the screen.

我在代号一个API中没有找到实现此用途所需的功能案件。我可以使用什么代码？我的目标设备是Android和iOS设备（智能手机和平板电脑）。

I didn't find in the Codename One API what I need to implement this use case. What code can I use? My target devices are Android and iOS devices (smartphones and tablets).

代码示例：

    Form hi = new Form("Hi World", new BorderLayout(BorderLayout.CENTER_BEHAVIOR_TOTAL_BELOW));

    disableToolbar(hi);

    introVideoMP4 = "/intro-landscape.mp4";
    if (Display.getInstance().isPortrait()) {
        introVideoMP4 = "/intro-portrait.mp4";
    }
    MediaPlayer introVideo = new MediaPlayer();
    try {
        InputStream videoInputStream = Display.getInstance().getResourceAsStream(getClass(), introVideoMP4);
        introVideo.setDataSource(videoInputStream, "video/mp4", () -> {
            introVideo.getMedia().setTime(0);
            introVideo.getMedia().play();
        });
        introVideo.setHideNativeVideoControls(true);
        introVideo.hideControls();
        introVideo.setAutoplay(true);
        hi.add(BorderLayout.CENTER, introVideo);
    } catch (Exception err) {
        Log.e(err);
    }

    hi.addOrientationListener(l -> {
        introVideoMP4 = "/intro-landscape.mp4";
        if (Display.getInstance().isPortrait()) {
            introVideoMP4 = "/intro-portrait.mp4";
        }
        try {
            InputStream videoInputStream = Display.getInstance().getResourceAsStream(getClass(), introVideoMP4);
            introVideo.setDataSource(videoInputStream, "video/mp4", () -> {
                introVideo.getMedia().setTime(0);
                introVideo.getMedia().play();
            });
        } catch (Exception err) {
            Log.e(err);
        }
    });
    hi.add(BorderLayout.NORTH, new Label("My App"));
    Button myButton = new Button("Tap me!");
    myButton.addActionListener(l -> {
        Log.p("myButton tapped");
    });
    hi.add(BorderLayout.SOUTH, myButton);
    hi.show();

推荐答案

通常，网站会根据设备生成视频下载/流在服务器上缩放比例（使用ffmpeg等工具。然后以正确的宽高比，比特率和格式交付视频。

Usually sites generate video downloads/streams based on the device proportions on the server (using tools such as ffmpeg. Then deliver a video with the right aspect ratio, bitrate & format.

没有内置功能可以裁剪视频类似于代号One中的适合比例。

There is no builtin functionality for cropping the video similar to "fit" scale in Codename One.

但是，如果您可以剪裁侧面或顶部，则可以为视频创建自己的布局管理器根据您对视频尺寸和屏幕尺寸的了解来确定组件的位置和大小/大小，创建布局管理器非常简单，这主要是实现 layoutContainer 方法的工作，其中您可以设置组件的X / Y / Width / Height。请参见 https： //www.codenameone.com/blog/map-layout-update.html

However, if you are OK with the sides or top being cropped then you can probably create your own layout manager for the video component and position/size it based on your knowledge of the video dimensions and screen dimensions. Creating a layout manager is really easy, it's mostly just the work of implementing the layoutContainer method where you can set the X/Y/Width/Height of the component. See https://www.codenameone.com/blog/map-layout-update.html

这篇关于代号One-缩放，居中和裁剪视频以强制其占据整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！