Код видео YouTube для вставки

Question

Я пытался встроить видео YouTube в одно приложение под кодовым названием.Когда я запускаю симулятор для Android и iOS, он выглядит нормально, но когда я действительно запускаю приложение на моем Galaxy S7, ничего не отображается.Я попытался использовать оба BrowserComponent и WebBrowser и ни один не работает.Мой код ниже:

    Form hi = new Form("Hi World", BoxLayout.y());                    
    Display display = Display.getInstance();

    BrowserComponent browser = new BrowserComponent();
    //WebBrowser browser = new WebBrowser();
    String videoUrl = "https://www.youtube.com/embed/r6VO3zaBJGY";

    int videoWidth = (int) ((double) display.getDisplayWidth());
    int videoHeight = (int) ((double) videoWidth*0.5625);     

    String integrationCode= "<iframe src=\"" +videoUrl+"\" frameborder=\"0\"  width=\"" + videoWidth + "\" height=\"" + videoHeight + "\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>";
    browser.setPage(integrationCode, null);
    browser.getAllStyles().setPadding(0, 0, 0, 0);
    browser.getAllStyles().setMargin(0, 0, 0, 0);

    Container browserContainer = new Container(new BorderLayout(CENTER_BEHAVIOR_CENTER));
    browserContainer.add(CENTER, browser);          
    hi.add(browserContainer);

    hi.show();

Answer 1

В коде есть две ошибки: BoxLayout и CENTER_BEHAVIOR_CENTER.

Причина, по которой это не сработает, связана с тем, как работают макеты.Менеджеры по расположению используют предпочтительный размер, чтобы дать компонентам правильный размер.BrowserComponent не имеет правильного предпочтительного размера, поскольку рендеринг HTML является асинхронным, и с самого начала он довольно гибкий.В этом случае вы использовали два менеджера компоновки, которые уважают предпочтительный размер.Они получают размер, равный нулю, и размещают компонент браузера соответствующим образом ...

BoxLayout.Y_AXIS нужна предпочтительная высота, а CENTER_BEHAVIOR_CENTER нужен предпочтительный размер, чтобы расположить компонент в центре.

Типичный обходной путь - использовать обычный BorderLayout, который по умолчанию соответствует масштабированному поведению.Это растягивает центральный компонент, чтобы занять доступное пространство.Обратите внимание, что вам нужно установить его на Form, так как он имеет жестко заданный размер всего экрана.Расположение в центре игнорирует предпочтительный размер и дает компоненту полный размер.

Это также решает другую проблему.Form по умолчанию прокручивается по оси Y.Прокручиваемость для компонентов Codename One и собственных виджетов (например, веб-страниц) могут конфликтовать друг с другом, поэтому с помощью макета границы вы неявно отключаете прокрутку, которая в этом случае может обеспечить превосходный UX.

Обратите внимание, что приведенный выше код можно заставить работатьпереопределение calcPreferredSize() в BrowserComponent и возврат размера, который вы хотите для компонента.Я не думаю, что это приведет к хорошему UX из-за проблем с прокруткой.