Create a player for Android

Available in Classic and VPC

Applying a player for Android describes the example for applying and setting Native player for Android with Video Player Enhancement Android SDK.

Apply player

The following describes how to apply a player:

1. Run Android Studio.

2. Add the following code to AndroidManifest.xml:

   <application
   ...
   android:hardwareAccelerated="true"
   android:usesCleartextTraffic="true"
   tools:replace="android:theme"
   
   >
   
   <activity 
   ...
   android:configChanges="orientation|screenSize"
   
   >
   

3. Add the file to libs after switching to the [Project] tab with tab menu clicked.
   <example> ncplayerNativeSdkAosbeta
   

4. Run sync after opening the app-level build.gradle file and declaring dependence on the added file in the libs.

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

   

Set up player

The following describes how to set up the player:

1. Apply the following code to call the method:

   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)
   
           // Save BuildConfig.APPLICATION_ID as appId
           // Use packageId for demo execution, required to connect actual packageId later
           var packageId = "com.sgrsoft.vpe.NCPlayerDemo" // use registered APPLICATION_ID
           var licenseKey = "2c58aba24474208958ea3e50c4bee263" // save to send the license key
   
           // Create NCPlayerView
           var player = NCPlayerView()
   
           // Connect to NCPlayerView webview
           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 Cloud test video1111",
                           "created_at":"2022.07.13111",
                           "profile_name":"NAVER Cloud",
                           "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 Cloud test video1111",
                            "created_at":"2022.07.13111",
                            "profile_name":"NAVER Cloud",
                            "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 Cloud test video1111",
                            "created_at":"2022.07.13111",
                            "profile_name":"NAVER Cloud",
                            "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. Apply the following code to create Class that inherits from NCPlayerEventInterface:

   class PlayerDelegate: NCPlayerEventInterface{}
   

3. Apply the following code to set delegate in onCreated:

   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
   
       var delegate = PlayerDelegate()
       NCPlayer.delegate = delegate
   
   }
   
   // Horizontal or Vertical
   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"
   
       // To activate or deactivate a control bar
       override fun NCPlayerOnControlbarActive(active: JSONObject?) {
           Log.d(TAG, "NCPlayerOnControlbarActive: $active")
       }
       // Event that occurs when the playback is completed to the end
       override fun NCPlayerOnEnd() {
           Log.d(TAG, "NCPlayerOnEnd: ")
       }
       // Full screen or not
       override fun NCPlayerOnFullscreenState(state: Boolean) {
           Log.d(TAG, "NCPlayerOnFullscreenState: ")
       }
       // Event that occurs when moving to the next video
       override fun NCPlayerOnNextTrack(data: JSONObject?) {
           Log.d(TAG, "NCPlayerOnNextTrack: $data")
       }
       // Event that occurs when a video is paused
       override fun NCPlayerOnPause() {
           Log.d("TAG", "NCPlayerOnPause: ")
       }
       // Event that occurs when video playback request is successful
       override fun NCPlayerOnPlay() {
           Log.d("TAG", "NCPlayerOnPlay: ")
       }
       // Event that occurs when moving to the previous video
       override fun NCPlayerOnPrevTrack(data: JSONObject?) {
           Log.d(TAG, "NCPlayerOnPrevTrack: $data")
       }
       // Event that occurs when the current play time changes
       override fun NCPlayerOnTimeUpdate(data: JSONObject?) {
           Log.d(TAG, "NCPlayerOnTimeUpdate: $data")
       }
       // Horizontal or Vertical
       override fun NCPlayerIsLandscape(state: Boolean) {
           Log.d(TAG, "NCPlayerIsLandscape: $state")
       }
   }