2017-03-20 8 views
1

Gluon MobileとJW Video Playerを統合する最良の方法は何ですか?それは非常にポピュラーなプラグインです。私はXamarinがそれを統合する手段を提供していることを知っていますが、私はGluon Mobileでどうすればいいのでしょうか?Gluon MobileとJW Video Player

私はMavenを使用してインポートしようとしている時間の最後のカップルを費やしている:

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

これは、依存関係に存在する以下のファイルにつながる:

コンパイル(メイン):を示しています。 aarファイル

コンパイル(Android): .aarファイルと.jarファイルを表示

ただし、依存関係はありますが、JWビデオパッケージはインポートできません。

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を渡さ:これは私のGradleファイルです。テストしているときにビデオがデスクトップに正常に表示されています。 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のに効果的に、このポート:ここ

はwebengineのための私のコードですか?また、ビデオが再生されたときにGluonモバイルアプリケーションが検出する方法を理解する必要があることにも注意してください。私はWebEngineはJavascriptからJavaコードを呼び出すことができることを知っている、と私はそれを動作させるために、次のアイデアを持っていますが、私はわからない:

  1. JavaScriptでのビデオの長さを取得し、別のスレッドでタイマーを作成しますJavaで。
  2. JavaのJSObjectにリンクするために、何らかの理由でJW Player APIからon completeコールバックを取得します。
  3. PHPを実行しているサーバー上のWebページに自分のREST呼び出しを作成し、そこでバックエンドコードを処理します。したがって、ビデオをJavascript(AJAXの別のURLへの呼び出しを含む)で完全に処理し、WebEngineを使用して何が起こっているかを示します。

答えて

0

これで回避策が見つかりましたが、アプリをまだ携帯端末に移植しようとしていないため、これを解決できるかどうかはわかりません。私はWebView/WebEngineをビデオの最後にコールバックを利用して利用しました。

JSコールバックがGluon Mobileにどれくらいうまく対応しているのかよくわからないので、これはモバイルでうまくいきたいと思っています。それは今、しかし私のデスクトップのために働く:

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(); 
      } 
     } 
    }); 
} 

更新

だから、JavaScriptにJavaは動作しません。しかし、私は必要なすべてを処理するためにJavascriptをWebエンジンに直接追加することでこれを解決することができました。これにより

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>"; 
    } 

が、私は出力にユーザーが持っているビデオ完了時にトークンができました:(モバイルデバイスに移植された場合であっても)「onended」と「onseekingは」インラインイベントリスナーが動作するように見えますビデオが視聴されたことを示すために入力します。また、ビデオ要素を完全に削除してシーク時にメッセージを出力するので、ユーザーが探していることを防ぎました。

関連する問題