Android向けプレイヤー適用

Prev Next

Classic/VPC環境で利用できます。

Android用プレイヤーの適用では、Video Player Enhancement Android SDKを活用して Android用 Nativeプレイヤーを適用して設定するためのユースケースを紹介します。

参考

Android SDKのユースケースを実行するには Standardプランを利用する必要があり、以下の環境が要求されます。

  • Android Studio
  • 外部との通信が可能な環境

プレイヤー適用

プレイヤーを適用する方法は、次の通りです。

  1. Android Studioを実行します。

  2. AndroidManifest.xmlに以下のコードを追加します。

    <application
    ...
    android:hardwareAccelerated="true"
    android:usesCleartextTraffic="true"
    tools:replace="android:theme"
    
    >
    
    <activity 
    ...
    android:configChanges="orientation|screenSize"
    
    >
    
  3. タブメニューをクリックして [Project] タブに変更し、libsにファイルを追加します。
    例) ncplayerNativeSdkAosbeta
    vpe-example-android_file

  4. appレベルの build.gradleファイルを開き、libsに追加したファイルへの依存関係を宣言した後、syncを実行します。

    implementation files('libs/ncplayerNativeSdkAosbeta.aar')
    implementation 'com.google.code.gson:gson:2.10.1'
    

    vpe-example-android_demo

プレイヤー設定

プレイヤーを設定する方法は、次の通りです。

  1. 以下のコードを適用してメソッドを呼び出します。
    class MainActivity : AppCompatActivity() {
        private lateinit var webView: WebView;
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            webView = findViewById(R.id.webView)
    
            // BuildConfig.APPLICATION_IDを appIdに保存
            // demo実行用の packageIdを利用、後に実際の packageIdとの関連付けが必要
            var packageId = "com.sgrsoft.vpe.NCPlayerDemo" // 登録済みの APPLICATION_IDを使用
            var licenseKey = "2c58aba24474208958ea3e50c4bee263" // ライセンスキーを送信するために保存
    
            // NCPlayerVIewを作成
            var player = NCPlayerView()
    
            // NCPlayerViewウェブビューとの関連付け
            player.webView = webView
    
            NCPlayer.prefs.setString("appId",packageId)
            NCPlayer.prefs.setString("licenseKey",licenseKey)
    
            val playerOptions = """
             {
                "playlist":[
                    {
                        "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                        "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202211/083fff831d8904cd9d9c180e5c10be0b.png",
                        "description":{
                            "title":"NAVERクラウドテスト動画1111",
                            "created_at":"2022.07.13111",
                            "profile_name":"NAVERクラウド",
                            "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                        },
                    },
                     {
                         "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                         "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202211/083fff831d8904cd9d9c180e5c10be0b.png",
                         "description":{
                             "title":"NAVERクラウドテスト動画1111",
                             "created_at":"2022.07.13111",
                             "profile_name":"NAVERクラウド",
                             "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                         },
                     },
                     {
                         "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                         "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202211/083fff831d8904cd9d9c180e5c10be0b.png",
                         "description":{
                             "title":"NAVERクラウドテスト動画1111",
                             "created_at":"2022.07.13111",
                             "profile_name":"NAVERクラウド",
                             "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                         },
                     }
                ],
                "autostart":true,
                "muted":true,
                "keyboardShortcut":true,
                "controls":true,
                "ui":"pc",
                "controlBtn":{
                    "play":true,
                    "fullscreen":true,
                    "volume":true,
                    "times":true,
                    "pictureInPicture":true,
                    "setting":true,
                },
                "progressBarColor":"#ff0000",
                "controlActiveTime":3000,
                "startMutedInfoNotVisible":false,
                "aspectRatio":"16/9",
                "objectFit":"contain",
                "playRateSetting":[0.5,0.75,1,1.5,2],
                "seekingPreview":true,
                "autoPause":false,
                "repeat":false,
                "touchGestures":true,
                "descriptionNotVisible":false,
                }
    
             """
            player.play(
                playerOptions,this
            )
        }
    }
    
  2. 以下のコードを適用して NCPlayerEventInterfaceを継承する Classを作成します。
    class PlayerDelegate: NCPlayerEventInterface{}
    
  3. 以下のコードを適用して onCreatedに delegateを設定します。
    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
    
        var delegate = PlayerDelegate()
        NCPlayer.delegate = delegate
    
    }
    
    // 縦横の確認
    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT)
        {
            NCPlayer.delegate?.NCPlayerIsLandscape(false)
        }
        else if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE)
        {
            NCPlayer.delegate?.NCPlayerIsLandscape(true)
        }
    }
    
    class PlayerDelegate: NCPlayerEventInterface{
        var TAG:String = "PlayerDelegate"
    
        // コントロールバーの有効化・無効化の確認
        override fun NCPlayerOnControlbarActive(active: JSONObject?) {
            Log.d(TAG, "NCPlayerOnControlbarActive: $active")
        }
        // 再生が最後まで完了したときに発生するイベント
        override fun NCPlayerOnEnd() {
            Log.d(TAG, "NCPlayerOnEnd: ")
        }
        // フルスクリーン状態の有無
        override fun NCPlayerOnFullscreenState(state: Boolean) {
            Log.d(TAG, "NCPlayerOnFullscreenState: ")
        }
        // 次の動画へ進むときに発生するイベント
        override fun NCPlayerOnNextTrack(data: JSONObject?) {
            Log.d(TAG, "NCPlayerOnNextTrack: $data")
        }
        // 動画が一時停止したときに発生するイベント
        override fun NCPlayerOnPause() {
            Log.d("TAG", "NCPlayerOnPause: ")
        }
        // 動画再生リクエストに成功したときに発生するイベント
        override fun NCPlayerOnPlay() {
            Log.d("TAG", "NCPlayerOnPlay: ")
        }
        // 前の動画へ戻るときに発生するイベント
        override fun NCPlayerOnPrevTrack(data: JSONObject?) {
            Log.d(TAG, "NCPlayerOnPrevTrack: $data")
        }
        // 現在の再生時間が変更されるときに発生するイベント
        override fun NCPlayerOnTimeUpdate(data: JSONObject?) {
            Log.d(TAG, "NCPlayerOnTimeUpdate: $data")
        }
        // 縦横の確認
        override fun NCPlayerIsLandscape(state: Boolean) {
            Log.d(TAG, "NCPlayerIsLandscape: $state")
        }
    }