嵌入 Codenameone Youtube 视频

Question

我一直在尝试在代号为 one 的应用程序中嵌入 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。这会拉伸中心组件以占用可用空间 space。请注意，您需要在 Form 本身上设置它，因为它具有整个屏幕的硬编码大小。中心位置忽略首选大小并为组件提供完整大小。

它还解决了另一个问题。 Form 默认情况下可在 Y 轴上滚动。 Codename One 组件和本机小部件（例如 Web）的可滚动性可能会发生冲突，因此通过使用边框布局，您可以隐式禁用滚动，在这种情况下可能会提供更好的用户体验。

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

嵌入 Codenameone Youtube 视频

Embed Codenameone Youtube Video

embed

youtube

codenameone