嵌入 Codenameone Youtube 视频

Question

我一直在尝试将 youtube 视频嵌入到一个代号为 one 的应用程序中。当我为 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 组件和本机小部件（例如 Web）的可滚动性可能会发生冲突，因此通过使用边框布局，您可以隐式禁用滚动，在这种情况下可能会提供出色的用户体验。

请注意，您可以通过覆盖BrowserComponent 中的calcPreferredSize() 并返回组件所需的大小来使上述代码正常工作。由于可滚动性问题，我认为这不会产生良好的用户体验。