NwPlayerView View

welcome to the nwplayerview view documentation we are excited to help you integrate and configure the player view for your custom nwplayerview implementation whether using exoplayer or another media player, this guide will help you create a seamless and visually appealing playback experience for your users one key responsibility when integrating an external player with our sdk is providing a custom player view unlike other parts of the sdk, we do not provide a default view for external players that means it is up to you to create and configure the player view to match your app's design and functionality in this guide, we will walk you through how do you create and configure the player view using the nwplayerview interface? important settings like usecontroller and keepscreenon to avoid common pitfalls how do you properly configure the layout and resize mode to ensure the video is rendered correctly? there is no weird scaling, zooming, or cropping! why the player view is so important? the player view is the heart of your video playback experience it is what your users see and interact with, so getting it right is crucial since our sdk does not provide a default view for external players, you must create one that fits your app's needs this includes ensuring the video is displayed in the correct aspect ratio preventing awkward scaling, zooming, or cropping that can ruin the viewing experience integrating seamlessly with the sdk's custom controller for playback controls important configuring nwplayerview when implementing the nwplayerview property in your custom class, there are two critical configurations you must set correctly to ensure a smooth user experience usecontroller keepscreenon let us explain why these settings are important and what can go wrong if not set correctly usecontroller must be false why it matters? we provide a custom controller in the sdk to handle playback controls like play, pause, and seek if you set usecontroller = true, the player's built in controller (e g , exoplayer's default controller) will also appear this creates overlapping controllers , which can confuse users and lead to a poor experience what happens if you ignore this users will see two sets of controls—our custom controller and the player's built in one this can cause ui conflicts and make your app look unpolished what you should do usecontroller = false keepscreenon must be true why it matters when users watch a video, they last want the screen to turn off mid playback setting keepscreenon = true ensures the screen stays active during playback, so users do not have to keep waking their device what happens if you ignore this the screen may turn off during playback, which can be frustrating for users, especially during live events or long videos what you should do keepscreenon = true configuring layout and resize mode to ensure the video looks great on the screen, you must configure the layout parameters and resize the player view mode here is an example of how to do it layoutparams = framelayout layoutparams( framelayout layoutparams wrap content, framelayout layoutparams wrap content ) apply { gravity = gravity center } resizemode = aspectratioframelayout resize mode fit key configurations layoutparams what it does defines the size and position of the player view within its parent container what you should do use wrap content for width and height so the view adjusts to the video's dimensions set gravity = gravity center will center the view within its container resizemode what it does controls how the video is scaled and displayed within the view what you should do use resize mode fit to ensure the video fits within the view without cropping or stretching this prevents awkward scaling, zooming, or distorted rendering what happens if you ignore this if the layout and resize mode are not configured properly, the video might look zoomed in or cropped , cutting off parts of the video stretched or distorted , which can ruin the viewing experience misaligned , making the video appear off center or awkwardly positioned here is how you can implement nwplayerview with all the correct configurations override val nwplayerview nwplayerview by lazy { object nwplayerview { override fun createplayerview() view { return playerview(context) apply { // disable the built in controller to avoid overlapping with our custom controller usecontroller = false // keep the screen on during playback to prevent auto turnoff keepscreenon = true // assign the player instance player = exoplayer // configure layout and resize mode layoutparams = framelayout layoutparams( framelayout layoutparams wrap content, framelayout layoutparams wrap content ) apply { gravity = gravity center } resizemode = aspectratioframelayout resize mode fit } } } } all nwplayerview functions here is a quick reference to all the functions in the nwplayerview interface and what they do createplayerview() view? responsibility creates and returns the player’s ui view this view is used to render the video content implementation you can customize this function to return a view that suits your application’s design and requirements for example, if you use exoplayer , you can return a playerview configured with your exoplayer instance key takeaways creating and configuring the player view is a core part of integrating an external player with our sdk following these guidelines ensures the video is rendered correctly, providing a smooth and visually appealing experience for your users here is what you need to remember always set usecontroller = false to avoid overlapping controllers and keep the ui clean always set keepscreenon = true to prevent the screen from turning off during playback configure layout and resize mode to avoid weird scaling, zooming, or misalignment if you skip these steps, you might have a poor user experience or ui conflicts so, double check your implementation to make sure everything is set up correctly