Gluon Mobile 和 JW Video Player

Question

将 Gluon Mobile 与 JW Video Player 集成的最佳方式是什么？这是一个非常受欢迎的插件。我知道 Xamarin 提供了集成它的方法，但我想知道如何使用 Gluon Mobile 进行集成？

我花了最后几个小时尝试使用 Maven 导入：

https://developer.jwplayer.com/sdk/android/docs/developer-guide/getting-started/library-project-setup/

这导致依赖项中存在以下文件：

编译（主要）：显示.aar文件

编译 (Android): 显示 .aar 文件和 .jar 文件

我无法导入 JW 视频包，但是即使存在依赖项。这是我的 gradle 文件：

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'org.javafxports:jfxmobile-plugin:1.2.0'
    }
}

apply plugin: 'org.javafxports.jfxmobile'

repositories {
    jcenter()
    maven {
        url 'http://nexus.gluonhq.com/nexus/content/repositories/releases' 
    }
    maven {
            url 'https://mvn.jwplayer.com/content/repositories/releases/'
    }
}

mainClassName = 'com.konfamde.Konfamde'

dependencies {
    compile 'com.gluonhq:charm:4.3.0' 
    androidRuntime 'com.gluonhq:charm-down-core-android:3.1.0'
    iosRuntime 'com.gluonhq:charm-down-core-ios:3.1.0'
    desktopRuntime 'com.gluonhq:charm-down-plugin-display-desktop:3.1.0'
    androidCompile 'com.longtailvideo.jwplayer:jwplayer-core:+'
    desktopCompile 'com.longtailvideo.jwplayer:jwplayer-core:+'
    compile 'com.longtailvideo.jwplayer:jwplayer-core:+'
}

jfxmobile {
    downConfig {
        version = '3.2.0'
        // Do not edit the line below. Use Gluon Mobile Settings in your project context menu instead
        plugins 'barcode-scan', 'connectivity', 'display', 'lifecycle', 'position', 'statusbar', 'storage'
    }
    android {
        androidSdk = 'C:/Users/wjlax/AppData/Local/Android/sdk'
        compileSdkVersion = '23'
        manifest = 'src/android/AndroidManifest.xml'
    }
    ios {
        infoPList = file('src/ios/Default-Info.plist')
        forceLinkClasses = [
                'com.konfamde.**.*',
                'com.gluonhq.**.*',
                'javax.annotations.**.*',
                'javax.inject.**.*',
                'javax.json.**.*',
                'org.glassfish.json.**.*'
        ]
    }
}

有点解决方案

我不知道这是否真的适用于移动设备，但我创建了一个 WebView 并向其传递了一个 iframe URL。在我测试时，该视频已成功显示在我的桌面上。将 WebView 对象移植到 iOS 和 Android 是否适用于 Gluon Mobile？

这是我的网络引擎代码：

WebView web = (WebView)view.lookup("#webber");
WebEngine engine = web.getEngine();
engine.load("https://content.jwplatform.com/players/VIDEOLINKHIDDEN.HTML");

这个端口是否有效到 iOS 和 Android？另请注意，我需要为 Gluon 移动应用程序找出一种方法来检测视频何时播放完毕。我知道 WebEngine 可以从 Java 脚本调用 Java 代码，我有以下想法让它工作，但我不确定：

在 Java 脚本中获取视频的长度并在 Java 中使用另一个线程创建计时器。
以某种方式获得从 JW Player API 到 link 到 Java 中的 JSObject 的 on complete 回调。
创建我自己的对服务器运行 PHP 上网页的 REST 调用，并在那里处理后端代码。因此，完全使用 Java 脚本处理视频（包括 AJAX 对单独 URL 的调用）并仅使用 WebEngine 来显示正在发生的事情。

Answer 1

好的，所以我找到了一个解决方法，但我不确定这是否会解决它，因为我还没有尝试将应用程序移植到移动设备上。我在视频结尾使用了带有回调的 WebView/WebEngine。

我不确定 Gluon Mobile 对 JS 回调的支持有多好，所以我希望这适用于移动设备。它现在适用于我的桌面：

注意传入getHTML方法的URL是JWPlayer网站上视频的URL

public WebView getWebEngine() {
    WebView web = new WebView();
    engine = web.getEngine();
    engine.loadContent(this.getHTML(this.video.getVideo()));
    return web;
}

public String getHTML(String videoUrl) {
    String videoElement = "<video width='320' height='240' id='myVideo' autoplay='true'>"
            + "<source src='" + videoUrl + "'/>"
            + "Your browser does not support the video tag."
            + "</video>";
    return "<html><body style='font-family:sans-serif';>" + videoElement + "</body></html>";
}

private void addEndingListener() {

    Document doc = engine.getDocument();

    Element el = (Element) doc.getElementsByTagName("video").item(0);

    EventListener listener = (Event evt) -> {
        this.reviewPane.setVisible(true);
    };

    if (el != null) {
        ((EventTarget) el).addEventListener("ended", listener, false);
    }

}

public void loadEngine(VBox container) {
    runLoop();
    this.reviewPane = getReviewPaneInstance();
    this.reviewPane.setVisible(false);
    container.getChildren().add(this.reviewPane);

    this.engine.reload();
    this.engine.getLoadWorker().stateProperty().addListener(
            new ChangeListener<State>() {
        @Override
        public void changed(ObservableValue ov, State oldState, State newState) {
            if (newState == Worker.State.SUCCEEDED) {
                addEndingListener();
            }
        }
    });
}

更新

所以 JavaJava 的脚本将不起作用。但是，我能够通过将 Javascript 直接添加到 Web 引擎来处理我需要的一切来解决这个问题。 "onended" 和 "onseeking" 内联事件侦听器似乎可以工作（即使移植到移动设备时）：

public String getHTML(String videoUrl) {
        String onSeek = "document.getElementById(\"container\").innerHTML = \"No fast forwarding allowed! Try again.\"";
        String onEnd = "document.getElementById(\"container\").innerHTML =" + this.codeGen;

        String videoElement = "<div id='container'><video id='video' width='320' height='240' id='myVideo' controls onseeking='" + onSeek + "' onended='" + onEnd + "'>"
                + "<source src='" + videoUrl + "'/>"
                + "Your browser does not support the video tag."
                + "</video></div>";
        return "<html><body style='font-family:sans-serif;'>" + videoElement + "</body></html>";
    }

有了这个，我已经能够在视频完成时输出一个令牌，用户必须输入该令牌才能表明视频已被观看过。我还阻止了用户搜索，因为它完全删除了视频元素并在搜索时输出了一条消息。

Gluon Mobile 和 JW Video Player

Gluon Mobile and JW Video Player

jwplayer

gluon-mobile