{"id":21667,"date":"2020-06-07T10:35:00","date_gmt":"2020-06-07T10:35:00","guid":{"rendered":"http:\/\/exoplayer_android_tutorial_easy_video_delivery_and_editing"},"modified":"2025-02-22T14:37:24","modified_gmt":"2025-02-22T22:37:24","slug":"exoplayer_android_tutorial_easy_video_delivery_and_editing","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/exoplayer_android_tutorial_easy_video_delivery_and_editing","title":{"rendered":"Easy Video Editing and Delivery for the Android ExoPlayer: A Tutorial"},"content":{"rendered":"

ExoPlayer<\/a>, a media player for Android, was developed and is being maintained by Google as an alternative for Android\u2019s default MediaPlayer<\/a>. Among ExoPlayer\u2019s advantages over MediaPlayer are dynamic adaptive streaming<\/a> over HTTP (DASH), smooth streaming, and common encryption<\/a>. A major advantage, however, is ExoPlayer\u2019s easy customization.<\/p>\n

Given the mobile constraints for resources, such as videos, ExoPlayer<\/a> is an excellent choice for playing videos in Android apps because of its video-buffering capability, which downloads videos<\/a> ahead of time for a seamless experience. You can play videos with ExoPlayer from phone storage or from URLs, as described later in this tutorial.<\/p>\n

Through an Android example app for ExoPlayer, this tutorial shows you how to leverage Cloudinary, a cloud-based service platform on which you can upload rich media for cloud storage as well as efficiently and effectively manage and transform them, in order to seamlessly display videos on ExoPlayer<\/a>.<\/p>\n

This is part of a series of articles about video optimization<\/a>.<\/p>\n

Note:<\/strong>

Here\u2019s a handy reference guide: Media Playback on Android with ExoPlayer: Getting Started<\/em><\/a><\/p><\/div>\n

Uploading and Transforming Videos<\/h2>\n

With Cloudinary, you can transform videos by simply tweaking their URLs. Cloudinary then delivers the videos through fast Content Delivery Networks (CDNs) with advanced caching techniques.<\/p>\n

Follow the steps below to upload and transform videos in Cloudinary.<\/p>\n

    \n
  1. \n

    Replace CLOUDINARY_NAME<\/code> in the AndroidManifest.xml<\/code> file with your cloud name, which is displayed in the console of your Cloudinary account:<\/p>\n

    <meta-data<\/span>\nandroid:name<\/span>=\"CLOUDINARY_URL\"<\/span>\nandroid:value<\/span>=\"cloudinary:\/\/@CLOUDINARY_NAME\"<\/span>\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
  2. \n
    Create an application class to initialize Cloudinary once for the app\u2019s entire lifecycle. Given this one-time initialization, the global variables usually reside in this class.<\/p>\n
    import<\/span> android.app.Application;\nimport<\/span> com.cloudinary.android.MediaManager;\npublic class<\/span> AppController<\/span> extends<\/span> Application<\/span> <\/span>{\n    @Override\n    public void<\/span> onCreate() {\n        super<\/span>.onCreate();\n        \/\/ Initialize Cloudinary<\/span>\n        MediaManager.init(this<\/span>);\n    }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
  3. \n
    Also in the AndroidManifest.xml<\/code> file, specify AppController<\/code> as the name of the application tag:<\/p>\n
    <application<\/span>\n    android:name<\/span>=\".AppController\"<\/span> ><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    Note:<\/strong> 
    Your uploads can be unsigned or signed. Signed uploads, which offer certain benefits, require an API key, which is not recommended for Android clients because it can be easily decompiled. Hence, opt for unsigned upload here.<\/p><\/div>\n<\/li>\n
  4. \n
    Enable unsigned uploads in your console: click the Settings<\/strong> icon on your dashboard and then the Upload<\/strong> tab, scroll down to the Upload Presets<\/strong> section, and enable unsigned uploading. Cloudinary then generates a new preset with a random string as its name.<\/p>\n<\/li>\n
  5. \n
    Upload to Cloudinary by calling this function:<\/p>\n
    MediaManager.get()\n    .upload(videoUri)\n    .unsigned(\"YOUR_PRESET\"<\/span>)\n    .option(\"resource_type\"<\/span>, \"video\"<\/span>)\n    .callback(new<\/span> UploadCallback() {\n        @Override\n        public void<\/span> onStart(String<\/span> requestId) {\n\n        }\n\n        @Override\n        public void<\/span> onProgress(String<\/span> requestId, long bytes, long totalBytes) {\n\n        }\n\n        @Override\n        public void<\/span> onSuccess(String<\/span> requestId, Map<\/span> resultData) {\n\n        }\n\n        @Override\n        public void<\/span> onError(String<\/span> requestId, ErrorInfo error) {\n\n        }\n\n        @Override\n        public void<\/span> onReschedule(String<\/span> requestId, ErrorInfo error) {\n\n        }\n    }).dispatch();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n
    videoUri<\/code> is of type Uri<\/code>, which represents the Uniform Resource Identifier (URI) of the video that resides in your phone, e.g., content:\/\/media\/external\/video\/media\/3495<\/code>.<\/p>\n
    Note:<\/strong> 
    Be sure to replace YOUR_PRESET<\/code> with the string generated by Cloudinary after you\u2019ve enabled unsigned upload.<\/p><\/div>\n
    On a successful upload, Cloudinary calls the onSuccess<\/code> method, which contains the details of your upload, such as URL<\/code> (the URL) and public_url<\/code> (the public URL), which is the unique name of the video as stored in Cloudinary.<\/p>\n
    Next, transform the video in the method below by referring to public_url<\/code>:<\/p>\n
    String<\/span> publicUrl = = (String<\/span>) resultData.get(\"public_url\"<\/span>);\nString<\/span> transformedUrl = MediaManager.get().url()\n        .transformation(new<\/span> Transformation()\n                .effect(\"fade:2000\"<\/span>).chain()\n                .effect(\"fade:-3000\"<\/span>).chain()\n                .effect(\"saturation:-50\"<\/span>)\n        .resourceType(\"video\"<\/span>).generate(publicUrl+\".mp4\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    You\u2019ve now added three effects to the video:<\/p>\n