{"id":13768,"date":"2025-09-09T12:16:44","date_gmt":"2025-09-09T03:16:44","guid":{"rendered":"https:\/\/aireviewirush.com\/?p=13768"},"modified":"2025-09-09T12:16:44","modified_gmt":"2025-09-09T03:16:44","slug":"android-builders-weblog-elevating-media-playback-introducing-preloading-with-media3","status":"publish","type":"post","link":"https:\/\/aireviewirush.com\/?p=13768","title":{"rendered":"Android Builders Weblog: Elevating media playback: Introducing preloading with Media3"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<meta content=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi3xfaeSVwhItxPTRdI2vEUu6t8ZSJWKMYB6xWkb9inI8ab1GltWuCExl29Z8SAQ1Fo2A4moEQLykBdkjIZ_IqikrD-QrmkwWKCOaKALh5fMiV5SRRUM7JRmjavEZ64horigEBxNK5RtW_NI88_LjbqTa69Os3a-ADQbrNp7R5e78dXmkc7rsYyx3cRYdo\/s1600\/AndroidSpotlight_Camera&amp;Media_Blog_Media3%201.5.0_Card%20%281%29.png\" name=\"twitter:image\"\/><br \/>\n<img decoding=\"async\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi3xfaeSVwhItxPTRdI2vEUu6t8ZSJWKMYB6xWkb9inI8ab1GltWuCExl29Z8SAQ1Fo2A4moEQLykBdkjIZ_IqikrD-QrmkwWKCOaKALh5fMiV5SRRUM7JRmjavEZ64horigEBxNK5RtW_NI88_LjbqTa69Os3a-ADQbrNp7R5e78dXmkc7rsYyx3cRYdo\/s1600\/AndroidSpotlight_Camera&amp;Media_Blog_Media3%201.5.0_Card%20%281%29.png\" alt=\"\"><\/p>\n<p><em>Posted by Mayuri Khinvasara Khabya &#8211; Developer Relations Engineer (<a href=\"https:\/\/www.linkedin.com\/in\/mayurikhinvasara\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a> and <a href=\"https:\/\/x.com\/mayuri_k\" target=\"_blank\">X<\/a>)<\/em><\/p>\n<p><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEh1PmhSCIphw3wGW7dJ9Yr7LLgG_6rqNwklO04UO6iZAsh6HjosgOn_SovJ8sEJvNYdeU08nMgnHQ3_L8F3pNU0Z72viRxqg8Ir0ceP-XVx45lkfImCbLnKywl7lho5CWJt0hBqt5dehuzLLpkrmkHdpTXRCzokmV4m3lswrsxAHWRHCstygUnK5PKCrO4\/s1600\/AndroidSpotlight_Camera&amp;Media_Blog_Media3%201.5.0_Banner.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" border=\"0\" data-original-height=\"800\" data-original-width=\"100%\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEh1PmhSCIphw3wGW7dJ9Yr7LLgG_6rqNwklO04UO6iZAsh6HjosgOn_SovJ8sEJvNYdeU08nMgnHQ3_L8F3pNU0Z72viRxqg8Ir0ceP-XVx45lkfImCbLnKywl7lho5CWJt0hBqt5dehuzLLpkrmkHdpTXRCzokmV4m3lswrsxAHWRHCstygUnK5PKCrO4\/s1600\/AndroidSpotlight_Camera&amp;Media_Blog_Media3%201.5.0_Banner.png\" alt=\"\"><\/a><\/p>\n<p align=\"justify\">In at the moment&#8217;s media-centric apps, delivering a clean, uninterrupted playback expertise is essential to a pleasant consumer expertise. Customers anticipate their movies to start out immediately and play seamlessly with out pauses.<\/p>\n<p align=\"justify\">The core problem is latency. Historically, a video participant solely begins its work\u2014connecting, downloading, parsing, buffering\u2014after the consumer has chosen an merchandise for playback. This reactive method is gradual for at the moment&#8217;s brief kind video context. The answer is to be proactive. We have to anticipate what the consumer will watch subsequent and get the content material prepared forward of time. That is the essence of preloading.<\/p>\n<p>The important thing advantages of preloading embody:<\/p>\n<ul>\n<ul>\n<li align=\"justify\"><b>\ud83d\ude80 Sooner Playback Begin:<\/b> Movies are already able to go, resulting in faster transitions between objects and a extra instant begin.<\/li>\n<li align=\"justify\"><b>\ud83d\udcc9 Diminished Buffering:<\/b> By proactively loading knowledge, playback is way much less prone to stall, for instance resulting from community hiccups.<\/li>\n<li align=\"justify\"><b>\u2728 Ensuing  smoother Person Expertise:<\/b> The mixture of quicker begins and fewer buffering creates a extra fluid, seamless interplay for customers to get pleasure from.<\/li>\n<\/ul>\n<\/ul>\n<p>On this three-part sequence, we&#8217;ll introduce and deep dive into Media3\u2019s highly effective utilities for (pre)loading elements.<\/p>\n<ul>\n<ul>\n<li align=\"justify\">In Half 1, we&#8217;ll cowl the foundations: understanding the completely different preloading methods out there in Media3, enabling PreloadConfiguration and organising the DefaultPreloadManager, enabling your app to preload objects. By the top of this weblog, it is best to have the ability to preload and play media objects along with your configured rating and period. <\/li>\n<li align=\"justify\">In Half 2, we&#8217;ll get into extra superior subjects of DefaultPreloadManager: utilizing listeners for analytics, exploring production-ready greatest practices just like the sliding window sample and customized shared  elements of DefaultPreloadManager and ExoPlayer.<\/li>\n<li align=\"justify\">In Half 3, we&#8217;ll dive deep into disk caching with DefaultPreloadManager.<\/li>\n<\/ul>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_53 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6a2942a3d81b8\" ><span class=\"\"><span style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6a2942a3d81b8\"  type=\"checkbox\" id=\"item-6a2942a3d81b8\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Preloading_to_the_rescue_%F0%9F%A6%B8%E2%80%8D%E2%99%80%EF%B8%8F\" title=\"Preloading to the rescue! \ud83e\uddb8\u200d\u2640\ufe0f\">Preloading to the rescue! \ud83e\uddb8\u200d\u2640\ufe0f<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#1_Preloading_playlist_objects_with_PreloadConfiguration\" title=\"1. Preloading playlist objects with PreloadConfiguration\">1. Preloading playlist objects with PreloadConfiguration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#2_Preloading_dynamic_lists_with_PreloadManager\" title=\"2. Preloading dynamic lists with PreloadManager\">2. Preloading dynamic lists with PreloadManager<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Setting_Up_Your_PreloadManager\" title=\"Setting Up Your PreloadManager\">Setting Up Your PreloadManager<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Configuring_Length_and_Rating_with_TargetPreloadStatusControl\" title=\"Configuring Length and Rating with TargetPreloadStatusControl\">Configuring Length and Rating with TargetPreloadStatusControl<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Managing_Preloading_Gadgets\" title=\"Managing Preloading Gadgets\">Managing Preloading Gadgets<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Demo_time\" title=\"Demo time\">Demo time<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#Examine_it_dwell_in_motion_%F0%9F%91%8D\" title=\"Examine it dwell in motion \ud83d\udc4d\">Examine it dwell in motion \ud83d\udc4d<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/aireviewirush.com\/?p=13768\/#What%E2%80%99s_Subsequent\" title=\"What&#8217;s Subsequent?\">What&#8217;s Subsequent?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Preloading_to_the_rescue_%F0%9F%A6%B8%E2%80%8D%E2%99%80%EF%B8%8F\"><\/span><span style=\"font-size: x-large;\">Preloading to the rescue! \ud83e\uddb8\u200d\u2640\ufe0f<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p align=\"justify\">The core thought behind preloading is easy: load media content material earlier than you want it. By the point a consumer swipes to the following video, the primary segments of the video are already downloaded and out there, prepared for instant playback.<\/p>\n<p align=\"justify\">Consider it like a restaurant. A busy kitchen would not look forward to an order to start out chopping onions. \ud83e\uddc5 They do their prep work upfront. Preloading is the prep work on your video participant.<\/p>\n<p align=\"justify\">When enabled, preloading may help decrease be a part of latency when a consumer skips to the following merchandise earlier than the playback buffer reaches the following merchandise. The primary interval of the following window is ready and video, audio and textual content samples are buffered. The preloaded interval is later queued into the participant with buffered samples instantly out there and able to be fed to the codec for rendering.<\/p>\n<p align=\"justify\">In Media3 there are two major APIs for preloading, every suited to completely different use circumstances. Choosing the proper API is step one.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Preloading_playlist_objects_with_PreloadConfiguration\"><\/span><span style=\"font-size: large;\">1. Preloading playlist objects with PreloadConfiguration<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p align=\"justify\">That is the easy method, helpful for linear, sequential media like playlists the place the playback order is predictable (like a sequence of episodes). You give the participant the complete checklist of media objects utilizing ExoPlayer&#8217;s <a href=\"https:\/\/developer.android.com\/media\/media3\/exoplayer\/playlists\" target=\"_blank\" rel=\"noopener\">playlist<\/a> APIs and set the <a href=\"https:\/\/developers.google.com\/admob\/android\/reference\/com\/google\/android\/gms\/ads\/preload\/PreloadConfiguration\" target=\"_blank\" rel=\"noopener\">PreloadConfiguration<\/a> for the participant,  then it robotically preloads the following objects within the sequence as configured. This API makes an attempt to optimize the be a part of latency when a consumer skips to the following merchandise earlier than the playback buffer already overlaps into the following merchandise.<\/p>\n<p align=\"justify\">Preloading is barely began when no media is being loaded for the continuing playback, which prevents it from competing for bandwidth with the first playback.<\/p>\n<p align=\"justify\">For those who\u2019re nonetheless undecided whether or not you want preloading, this API is a good low-lift choice to attempt it out!<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/>participant.<span style=\"color: #687822\">preloadConfiguration<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span>\n<span style=\"color: #BBB\">    <\/span>PreloadConfiguration(<span style=\"color: #3D7B7B; font-style: italic\">\/* targetPreloadDurationUs= *\/<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">5<\/span>_000_000L)\n<\/pre>\n<\/div>\n<p align=\"justify\">With the <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/media3\/exoplayer\/ExoPlayer.PreloadConfiguration\" target=\"_blank\" rel=\"noopener\">PreloadConfiguration<\/a> above, the participant tries to preload 5 seconds of media for the following merchandise within the playlist.<\/p>\n<p>As soon as opted-in, playlist preloading might be turned off once more through the use of <span style=\"color: #0d904f ;font-family: courier;\">PreloadConfiguration.DEFAULT<\/span> to disable playlist preloading:<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/>participant.<span style=\"color: #687822\">preloadConfiguration<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>PreloadConfiguration.<span style=\"color: #687822\">DEFAULT<\/span>\n<\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"2_Preloading_dynamic_lists_with_PreloadManager\"><\/span><span style=\"font-size: large;\">2. Preloading dynamic lists with PreloadManager<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p align=\"justify\">For dynamic UIs like vertical feeds or carousels, the place the &#8220;subsequent&#8221; merchandise is decided by consumer interplay, the PreloadManager API is acceptable. It is a new highly effective, standalone  element throughout the Media3 ExoPlayer library particularly designed to proactively preload. It manages a group of potential MediaSources, prioritizing them primarily based on proximity to the consumer&#8217;s present place and presents <b><u>granular<\/u><\/b> management over what to preload, appropriate for advanced eventualities like dynamic feeds of brief kind movies.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Setting_Up_Your_PreloadManager\"><\/span><span style=\"font-size: medium;\">Setting Up Your PreloadManager<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p align=\"justify\">The <a href=\"https:\/\/developer.android.com\/reference\/androidx\/media3\/exoplayer\/source\/preload\/DefaultPreloadManager\" target=\"_blank\" rel=\"noopener\">DefaultPreloadManager<\/a> is the canonical implementation for PreloadManager.<\/p>\n<p align=\"justify\">The builder of <span style=\"color: #0d904f ;font-family: courier;\">DefaultPreloadManager<\/span> can construct each the DefaultPreloadManager and any <a href=\"https:\/\/developer.android.com\/media\/media3\/exoplayer\" target=\"_blank\" rel=\"noopener\">ExoPlayer<\/a> situations that can play its preloaded content material. To create a DefaultPreloadManager, you will have to cross a TargetPreloadStatusControl, which the preload supervisor can question to learn the way a lot to load for an merchandise. We&#8217;ll clarify and outline an instance of TargetPreloadStatusControl within the part under.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">preloadManagerBuilder<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span>\nDefaultPreloadManager.<span style=\"color: #687822\">Builder<\/span>(context,<span style=\"color: #BBB\"> <\/span>targetPreloadStatusControl)\n<span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">preloadManager<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">preloadManagerBuilder<\/span>.<span style=\"color: #687822\">construct<\/span>()\n\n<span style=\"color: #3D7B7B; font-style: italic\">\/\/ Construct ExoPlayer with DefaultPreloadManager.Builder<\/span>\n<span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">participant<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>preloadManagerBuilder.<span style=\"color: #687822\">buildExoPlayer<\/span>()\n<\/pre>\n<\/div>\n<p align=\"justify\">Utilizing the identical <a href=\"https:\/\/developer.android.com\/reference\/androidx\/media3\/exoplayer\/source\/preload\/DefaultPreloadManager.Builder#build()\" target=\"_blank\" rel=\"noopener\">builder<\/a> for each the ExoPlayer and DefaultPreloadManager is important, which ensures that the elements beneath the hood of them are accurately shared.<\/p>\n<p align=\"justify\">And that is it! You now have a supervisor able to obtain directions.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Configuring_Length_and_Rating_with_TargetPreloadStatusControl\"><\/span><span style=\"font-size: medium;\">Configuring Length and Rating with <a href=\"https:\/\/developer.android.com\/reference\/androidx\/media3\/exoplayer\/source\/preload\/TargetPreloadStatusControl\" target=\"_blank\" rel=\"noopener\">TargetPreloadStatusControl<\/a><\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p align=\"justify\">What if you wish to preload, say, 10 seconds of video ? You possibly can present the place of your media objects within the carousel, and the DefaultPreloadManager prioritizes loading the objects primarily based on how shut it&#8217;s to the merchandise the consumer is at present enjoying.<\/p>\n<p align=\"justify\">If you wish to management how a lot period of the merchandise to preload, you&#8217;ll be able to inform that with DefaultPreloadManager.PreloadStatus you come.<\/p>\n<p>For instance,<\/p>\n<ul>\n<ul>\n<li align=\"justify\">Merchandise \u2018A\u2019 is the very best precedence, load 5 seconds of video.<\/li>\n<li align=\"justify\">Merchandise \u2018B\u2019 is medium precedence however whenever you get to it, load 3 seconds of video.<\/li>\n<li align=\"justify\">Merchandise \u2018C\u2019 is much less precedence, load solely tracks.<\/li>\n<li align=\"justify\">Merchandise \u2018D\u2019 is even much less of a precedence, simply put together.<\/li>\n<li align=\"justify\">Some other objects are far-off, Don\u2019t preload something.<\/li>\n<\/ul>\n<\/ul>\n<p align=\"justify\">This granular management may help you optimize your useful resource utilization which is beneficial for a seamless playback.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #008000; font-weight: bold\">import<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #00F; font-weight: bold\">androidx.media3.exoplayer.DefaultPreloadManager.PreloadStatus<\/span>\n\n\n<span style=\"color: #008000; font-weight: bold\">class<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #00F; font-weight: bold\">MyTargetPreloadStatusControl<\/span>(\n<span style=\"color: #BBB\">    <\/span>currentPlayingIndex:<span style=\"color: #BBB\"> <\/span><span style=\"color: #B00040\">Int<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>C.<span style=\"color: #687822\">INDEX_UNSET<\/span>\n)<span style=\"color: #BBB\"> <\/span>:<span style=\"color: #BBB\"> <\/span>TargetPreloadStatusControl<span style=\"color: #666\">&lt;<\/span><span style=\"color: #B00040\">Int<\/span>,PreloadStatus<span style=\"color: #666\">&gt;<\/span><span style=\"color: #BBB\"> <\/span>{\n\n\n<span style=\"color: #BBB\">    <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ The app is accountable for updating this primarily based on UI state<\/span>\n<span style=\"color: #BBB\">    <\/span><span style=\"color: #008000; font-weight: bold\">override<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">enjoyable<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #00F\">getTargetPreloadStatus<\/span>(index:<span style=\"color: #BBB\"> <\/span><span style=\"color: #B00040\">Int<\/span>):<span style=\"color: #BBB\"> <\/span>PreloadStatus? {\n\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">distance<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>index<span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">-<\/span><span style=\"color: #BBB\"> <\/span>currentPlayingIndex\n\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Adjoining objects (Subsequent): preload 5 seconds<\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #008000; font-weight: bold\">if<\/span><span style=\"color: #BBB\"> <\/span>(distance<span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">==<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">1<\/span>)<span style=\"color: #BBB\"> <\/span>{<span style=\"color: #BBB\"> <\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Return a PreloadStatus that's labelled by STAGE_SPECIFIED_RANGE_LOADED and counsel loading \/\/ 5000ms from the default begin place<\/span>\n<span style=\"color: #BBB\">                    <\/span><span style=\"color: #008000; font-weight: bold\">return<\/span><span style=\"color: #BBB\"> <\/span>PreloadStatus.<span style=\"color: #687822\">specifiedRangeLoaded<\/span>(<span style=\"color: #666\">5000L<\/span>)\n<span style=\"color: #BBB\">                <\/span>}<span style=\"color: #BBB\"> <\/span>\n\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Adjoining objects (Earlier): preload 3 seconds<\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #008000; font-weight: bold\">else<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">if<\/span><span style=\"color: #BBB\"> <\/span>(distance<span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">==<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">-1<\/span>)<span style=\"color: #BBB\"> <\/span>{<span style=\"color: #BBB\"> <\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Return a PreloadStatus that's labelled by STAGE_SPECIFIED_RANGE_LOADED \/\/and counsel loading 3000ms from the default begin place<\/span>\n<span style=\"color: #BBB\">                    <\/span><span style=\"color: #008000; font-weight: bold\">return<\/span><span style=\"color: #BBB\"> <\/span>PreloadStatus.<span style=\"color: #687822\">specifiedRangeLoaded<\/span>(<span style=\"color: #666\">3000L<\/span>)\n<span style=\"color: #BBB\">                <\/span>}<span style=\"color: #BBB\"> <\/span>\n\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Gadgets two positions away: simply choose tracks<\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #008000; font-weight: bold\">else<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">if<\/span><span style=\"color: #BBB\"> <\/span>(distance)<span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">==<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">2<\/span>)<span style=\"color: #BBB\"> <\/span>{\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Return a PreloadStatus that's labelled by STAGE_TRACKS_SELECTED<\/span>\n<span style=\"color: #BBB\">                    <\/span><span style=\"color: #008000; font-weight: bold\">return<\/span><span style=\"color: #BBB\"> <\/span>PreloadStatus.<span style=\"color: #687822\">TRACKS_SELECTED<\/span>\n<span style=\"color: #BBB\">                <\/span>}<span style=\"color: #BBB\"> <\/span>\n\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Gadgets 4 positions away: simply choose put together<\/span>\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #008000; font-weight: bold\">else<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">if<\/span><span style=\"color: #BBB\"> <\/span>(abs(distance)<span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">&lt;=<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">4<\/span>)<span style=\"color: #BBB\"> <\/span>{\n<span style=\"color: #BBB\">        <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ Return a PreloadStatus that's labelled by STAGE_SOURCE_PREPARED<\/span>\n<span style=\"color: #BBB\">                    <\/span><span style=\"color: #008000; font-weight: bold\">return<\/span><span style=\"color: #BBB\"> <\/span>PreloadStatus.<span style=\"color: #687822\">SOURCE_PREPARED<\/span>\n<span style=\"color: #BBB\">                <\/span>}\n\n<span style=\"color: #BBB\">             <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ All different objects are too far-off<\/span>\n<span style=\"color: #BBB\">             <\/span><span style=\"color: #008000; font-weight: bold\">return<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">null<\/span>\n<span style=\"color: #BBB\">            <\/span>}\n}\n<\/pre>\n<\/div>\n<p align=\"justify\"><em>Tip: PreloadManager can hold each the earlier and subsequent objects preloaded, whereas the PreloadConfiguration will solely sit up for the following objects.<\/em><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Managing_Preloading_Gadgets\"><\/span><span style=\"font-size: medium;\">Managing Preloading Gadgets<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p align=\"justify\">Together with your supervisor created, you can begin telling it what to work on. As your consumer scrolls via a feed, you will establish the upcoming movies and add them to the supervisor. The interplay with the PreloadManager is a state-driven dialog between your UI and the preloading engine.<\/p>\n<p><b>1. Add Media Gadgets<\/b><\/p>\n<p align=\"justify\">As you populate your feed, you should inform the <a href=\"https:\/\/developer.android.com\/reference\/androidx\/media3\/exoplayer\/source\/preload\/DefaultPreloadManager\" target=\"_blank\" rel=\"noopener\">supervisor<\/a> of the media it wants to trace. In case you are beginning, you would add your entire checklist you need to preload. Subsequently you&#8217;ll be able to hold including a single merchandise to the checklist as and when required. You may have full management over what objects are within the preloading checklist which implies you additionally must handle what&#8217;s added and faraway from the supervisor.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">initialMediaItems<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>pullMediaItemsFromService(<span style=\"color: #3D7B7B; font-style: italic\">\/* depend= *\/<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">20<\/span>)\n<span style=\"color: #008000; font-weight: bold\">for<\/span><span style=\"color: #BBB\"> <\/span>(index<span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">in<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">0<\/span><span style=\"color: #BBB\"> <\/span>till<span style=\"color: #BBB\"> <\/span>initialMediaItems.<span style=\"color: #687822\">dimension<\/span>)<span style=\"color: #BBB\"> <\/span>{\n<span style=\"color: #BBB\">    <\/span>preloadManager.<span style=\"color: #687822\">add<\/span>(\n<span style=\"color: #BBB\">        <\/span>initialMediaItems.<span style=\"color: #687822\">get<\/span>(index),index)\n<span style=\"color: #BBB\">    <\/span>)\n}\n<\/pre>\n<\/div>\n<p align=\"justify\">The supervisor will now begin fetching knowledge for this <span style=\"color: #0d904f ;font-family: courier;\">MediaItem<\/span> within the background.<\/p>\n<p align=\"justify\">After including, inform the supervisor to re-evaluate its new checklist (hinting that one thing has modified like including\/ eradicating an merchandise, or the consumer switches to play a brand new merchandise.)<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/>preloadManager.<span style=\"color: #687822\">invalidate<\/span>()\n<\/pre>\n<\/div>\n<p><b>2. Retrieve and Play an Merchandise<\/b><\/p>\n<p align=\"justify\">Right here comes the principle playback logic. When the consumer decides to play that video, you needn&#8217;t create a brand new <span style=\"color: #0d904f ;font-family: courier;\">MediaSource<\/span>. As a substitute, you ask the <span style=\"color: #0d904f ;font-family: courier;\">PreloadManager<\/span> for the one it has already ready. You possibly can retrieve the MediaSource from the Preload Supervisor utilizing the MediaItem.<\/p>\n<p align=\"justify\">If the retrieved merchandise from the PreloadManager is null, which means the mediaItem shouldn&#8217;t be preloaded but or added to the PreloadMamager, so that you select to set the mediaItem instantly.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #3D7B7B; font-style: italic\">\/\/ When a media merchandise is about to displ\u200b\u200bay on the display<\/span>\n<span style=\"color: #008000; font-weight: bold\">val<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #19177C\">mediaSource<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #666\">=<\/span><span style=\"color: #BBB\"> <\/span>preloadManager.<span style=\"color: #687822\">getMediaSource<\/span>(mediaItem)\n<span style=\"color: #008000; font-weight: bold\">if<\/span><span style=\"color: #BBB\"> <\/span>(mediaSource<span style=\"color: #666\">!=<\/span><span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">null<\/span>)<span style=\"color: #BBB\"> <\/span>{\n<span style=\"color: #BBB\">  <\/span>participant.<span style=\"color: #687822\">setMediaSource<\/span>(mediaSource)\n}<span style=\"color: #BBB\"> <\/span><span style=\"color: #008000; font-weight: bold\">else<\/span><span style=\"color: #BBB\"> <\/span>{\n<span style=\"color: #BBB\">  <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ If mediaSource is null, that mediaItem hasn't been added but.<\/span>\n<span style=\"color: #BBB\">  <\/span><span style=\"color: #3D7B7B; font-style: italic\">\/\/ So, ship it on to the participant.<\/span>\n<span style=\"color: #BBB\">  <\/span>participant.<span style=\"color: #687822\">setMediaItem<\/span>(mediaItem)\n}\nparticipant.<span style=\"color: #687822\">put together<\/span>()\n<span style=\"color: #3D7B7B; font-style: italic\">\/\/ When the media merchandise is displaying on the heart of the display<\/span>\nparticipant.<span style=\"color: #687822\">play<\/span>()\n<\/pre>\n<\/div>\n<p align=\"justify\">By making ready the MediaSource retrieved from the PreloadManager, you seamlessly transition from preloading to playback, utilizing the info that is already in reminiscence. That is what makes the beginning time quicker.<\/p>\n<p><b>3. Maintain the present index in sync with the UI<\/b><\/p>\n<p align=\"justify\">Since our feed \/ checklist may very well be dynamic, it is essential to inform the PreloadManager of your present enjoying index in order that it could at all times prioritize objects nearest to your present index for preloading.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/>preloadManager.<span style=\"color: #687822\">setCurrentPlayingIndex<\/span>(currentIndex)\n<span style=\"color: #3D7B7B; font-style: italic\">\/\/ Have to name invalidate() to replace the priorities<\/span>\npreloadManager.<span style=\"color: #687822\">invalidate<\/span>()\n<\/pre>\n<\/div>\n<p><b>4. Take away an Merchandise<\/b><\/p>\n<p align=\"justify\">To maintain the supervisor environment friendly, it is best to take away objects it not wants to trace, equivalent to objects which can be far-off from the consumer&#8217;s present place.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #3D7B7B; font-style: italic\">\/\/ When an merchandise is just too removed from the present enjoying index<\/span>\npreloadManager.<span style=\"color: #687822\">take away<\/span>(mediaItem)\n<\/pre>\n<\/div>\n<p align=\"justify\">If you might want to clear all objects without delay, you&#8217;ll be able to name preloadManager.reset().<\/p>\n<p><b>5. Launch the Supervisor<\/b><\/p>\n<p align=\"justify\">Whenever you not want the PreloadManager (e.g., when your UI is destroyed), you should launch it to liberate its sources.  place to do that is the place you\u2019re already releasing your Participant\u2019s sources. It\u2019s beneficial to launch the supervisor earlier than the participant because the participant can proceed to play if you happen to do not want any extra preloading.<\/p>\n<p><!--Kotlin--><\/p>\n<div style=\"background: #f8f8f8; overflow:auto;width:auto;border:0;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span\/><span style=\"color: #3D7B7B; font-style: italic\">\/\/ In your Exercise's onDestroy() or Composable's onDispose<\/span>\npreloadManager.<span style=\"color: #687822\">launch<\/span>()\n<\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Demo_time\"><\/span><span style=\"font-size: large;\">Demo time<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Examine_it_dwell_in_motion_%F0%9F%91%8D\"><\/span><span style=\"font-size: medium;\">Examine it dwell in motion \ud83d\udc4d<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p align=\"justify\">Within the demo under , we see the affect of PreloadManager on the correct facet which has quicker load occasions, whereas the left facet reveals the prevailing expertise. You too can view the code <a href=\"https:\/\/github.com\/android\/socialite\/tree\/ui_polishes_short_videos\" target=\"_blank\" rel=\"noopener\">pattern<\/a> for the demo. (Bonus: It additionally shows startup latency for each video)<\/p>\n<p><image><\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" alt=\"Jetpack Media3 API for fast loading of short videos [PreloadManager]\" border=\"0\" id=\"imgCaption\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgPRidTRe3s-2TIek6_YlfUsFwxRAaH-6rynAMXLX7UwVM9b-PhCAfOqAWwrTIBj6pSfntZizlYLU6nhmkNqbwwvBLGkWRjsOKNb-c56Jr8gutxBkSZidmOP1T420tBU5knaVvuAygMKHnDV8epXMc2TuIZN2klfnIKulNQUncwfz4fuuIlbLQ3yxhrhrU\/s1600\/Demo-PreloadManager%202.gif\" width=\"100%\"\/><\/div>\n<p><\/image><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What%E2%80%99s_Subsequent\"><\/span><span style=\"font-size: x-large;\">What&#8217;s Subsequent?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p align=\"justify\">And that is a wrap for Half 1! You now have the instruments to construct a dynamic preloading system. You possibly can both use <span style=\"color: #0d904f ;font-family: courier;\">PreloadConfiguration<\/span> to preload the following merchandise of a playlist in ExoPlayer or arrange a <span style=\"color: #0d904f ;font-family: courier;\">DefaultPreloadManager<\/span>, add and take away objects on the fly, configure the goal preload standing, and accurately retrieve the preloaded content material for playback.<\/p>\n<p align=\"justify\">In <b>Half 2<\/b>, we&#8217;ll go deeper on the <span style=\"color: #0d904f ;font-family: courier;\">DefaultPreloadManager<\/span>. We&#8217;ll discover easy methods to pay attention for preloading occasions, focus on greatest practices like utilizing a sliding window to keep away from reminiscence points, and peek beneath the hood at customized shared elements of ExoPlayer and DefaultPreloadManager.<\/p>\n<p align=\"justify\">Do you might have any suggestions to <a href=\"https:\/\/github.com\/androidx\/media\/issues\" target=\"_blank\" rel=\"noopener\">share<\/a>? We&#8217;re keen to listen to from you.<\/p>\n<p align=\"justify\">Keep tuned, and go make your app quicker! \ud83d\ude80<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Posted by Mayuri Khinvasara Khabya &#8211; Developer Relations Engineer (LinkedIn and X) In at the moment&#8217;s media-centric apps, delivering a clean, uninterrupted playback expertise is essential to a pleasant consumer expertise. Customers anticipate their movies to start out immediately and play seamlessly with out pauses. The core problem is latency. Historically, a video participant solely [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13770,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-13768","post","type-post","status-publish","format-standard","has-post-thumbnail","category-mobile"],"_links":{"self":[{"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/posts\/13768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13768"}],"version-history":[{"count":1,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/posts\/13768\/revisions"}],"predecessor-version":[{"id":13769,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/posts\/13768\/revisions\/13769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=\/wp\/v2\/media\/13770"}],"wp:attachment":[{"href":"https:\/\/aireviewirush.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aireviewirush.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}