In the ever-evolving landscape of mobile technology, one thing has become abundantly clear: Video has taken center stage. Whether it\u2019s for entertainment, education, or communication, mobile devices have become our go-to screens for video consumption. In this blog post, we’ll embark on a journey through the astonishing growth of mobile video in recent years, explore the challenges of implementing a video player, delve into common considerations for integrating video experiences in your mobile apps, and then dive into a technical guide on how to incorporate video playback in your iOS app using the iOS Native Video Player from Cloudinary.<\/p>\n\n\n\n
It\u2019s no longer a secret that video content increases online user engagement and conversion rates. According to the Content Marketing Institute<\/a>, video is the #1 content format used by brands to drive awareness, sell products or services, and build consumer trust. <\/p>\n\n\n\n From a consumer perspective, with the ubiquity of smartphones and the ever-increasing availability of high-speed 5G internet, people are spending a substantial amount of their screen time on mobile devices. Furthermore, 90% of this time on mobile devices is spent on using apps (source<\/a>). <\/p>\n\n\n\n Video and mobile apps are truly a match made in heaven. There are several ways brands are embedding video experiences in their mobile apps: <\/p>\n\n\n\n As a mobile app developer, the integration of video playback into your apps is an exciting venture, but it does come with its own set of challenges. Here, we\u2019ll explore some of the key hurdles that developers often encounter:<\/p>\n\n\n\n 1. Compatibility and device fragmentation<\/strong>. Mobile devices come in various models and screen sizes. Ensuring that your video player works seamlessly across this spectrum can be a daunting task. Developers need to optimize video player layouts and controls to accommodate different screen sizes and resolutions.<\/p>\n\n\n\n 2. Network conditions<\/strong>. Mobile users can be on a variety of network conditions, ranging from high-speed WiFi to slow 3G connections. To deliver a smooth video experience, developers must implement adaptive streaming and handle network interruptions gracefully.<\/p>\n\n\n\n 3. Video formats<\/strong>. Supporting different video formats can be challenging, especially when dealing with a wide range of source materials. Developers need to consider format conversion, transcoding, or using versatile codecs to ensure compatibility.<\/p>\n\n\n\n 4. Cross-platform compatibility<\/strong>. If you aim to make your app available on both iOS and Android, you may face challenges in ensuring a consistent video experience across different platforms.<\/p>\n\n\n\n 5. Performance optimization<\/strong>. Ensuring that the video player is resource-efficient, doesn\u2019t drain the device\u2019s battery, and performs well under various conditions is an ongoing task.<\/p>\n\n\n\n To help you seamlessly integrate video playback into your app, Cloudinary now offers the iOS Native Video Player SDK and as part of it the CLDVideoPlayer, which is a wrapper for iOS AVPlayer. This will allow you to quickly add videos to your iOS mobile app while ensuring superior performance and user experience. <\/p>\n\n\n\n Here\u2019s how you can get started:<\/p>\n\n\n\n Begin by integrating the cloudinary_ios SDK into your Xcode project. You can do this using CocoaPods or Swift Package Manager, depending on your preference.<\/p>\n\n\n\n CocoaPods:<\/p>\n\n\n Set up your Cloudinary account and initialize it in your app. You\u2019ll need your cloud name and API key for this.<\/p>\n\n\n Now, let\u2019s create an instance of CLDVideoPlayer and set its publicId to the video you want to play.<\/p>\n\n\n Or you can just send a URL.<\/p>\n\n\n You can add CLDVIdeoPlayer to an You can also add CLDVideoPlayer to an AVPlayerViewController.<\/p>\n\n\n To play the video you can just call the You can also call various other actions such as And that\u2019s it! You\u2019ve successfully integrated video playback into your iOS app using the iOS Native Video Player from Cloudinary.<\/p>\n\n\n\n By default, the iOS Native Video Player operates with an adaptive bitrate (ABR) mechanism, which means it automatically receives a manifest file in the form of a .m3u8<\/a> file and selects the most suitable playback link for your video.\u00a0<\/p>\n\n\n\n If you wish to explicitly disable the automatic profile selection of the ABR feature, you can achieve this by setting the automaticStreamingProfile flag to false, giving you control over the adaptive streaming behavior of the iOS Native Video Player and so you can fine-tune your video playback experience.<\/p>\n\n\n You can also add video transformations to adjust the video on the fly. For instance, you can trim, overlay images, normalize audio, and more along with an automatic streaming profile. However, these transformations must be applied in a chained manner. Learn more here<\/a>.<\/p>\n\n\n\n If subtitles are enabled via URL, they will be automatically shown by the player. The following link will play a video with English subtitles.<\/p>\n\n\n Mobile video consumption has grown at an astonishing rate. As an iOS developer, you now have the power to tap into this trend by seamlessly integrating video playback into your apps with the iOS Native Video Player. Watch out for more in this space as we continue to invest in adding built-in Analytics as well as native video player SDKs for Android, React Native, and Flutter. <\/p>\n\n\n\n\n
Challenges for Video Integration<\/h2>\n\n\n\n
Cloudinary iOS Native Video Player SDK<\/h2>\n\n\n\n
Step 1: Installation<\/h3>\n\n\n\n
pod 'Cloudinary'<\/span>, '~> 4.0'<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nStep 2: Initialize Cloudinary<\/h3>\n\n\n\n
let<\/span> config = CLDConfiguration(cloudName: \"CLOUD_NAME\"<\/span>, apiKey<\/span>: \"API_KEY\"<\/span>)\n\nlet<\/span> cloudinary = CLDCloudinary(configuration: config)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nStep 3: Create CLDVideoPlayer<\/h3>\n\n\n\n
CLDVideoPlayer(publicId: \"<your_public_id<\/span>><\/span>\", cloudinary: <your_cloudinary_object<\/span>><\/span>)<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nCLDVideoPlayer(url:\"<your_url<\/span>><\/span>\")<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nStep 4: Display the Video<\/h3>\n\n\n\n
In Layer<\/h4>\n\n\n\n
AVPlayerLayer<\/code>.<\/p>\n\n\n@IBOutlet<\/span> weak var videoView:<\/span> UIView!\n\nlet player = CLDVideoPlayer(publicId:<\/span> \"<your_public_id>\"<\/span>, cloudinary:<\/span> <your_cloudinary_object>)\n\nlet playerLayer = AVPlayerLayer(player:<\/span> player)\n\nvideoView.backgroundColor = .black\n\nplayerLayer.frame = self.videoView.bounds\n\nplayerLayer.videoGravity = .resizeAspectFill\n\nvideoView.layer.addSublayer(playerLayer)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nIn AVPlayerViewController<\/h4>\n\n\n\n
@IBOutlet<\/span> weak var videoView:<\/span> UIView!\n\nlet player = CLDVideoPlayer(publicId:<\/span> \"<your_public_id>\"<\/span>, cloudinary:<\/span> <your_cloudinary_object>)\n\nlet playerController = AVPlayerViewController()\n\nplayerController.player = player\n\naddChild(playerController)\n\nplayerController.videoGravity = .resizeAspectFill\n\nvideoView.addSubview(playerController.view)\n\nplayerController.view.frame = videoView.bounds\n\nplayerController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]\n\nplayerController.didMove(toParent:<\/span> self)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nStep 5: Video Action<\/h3>\n\n\n\n
play()function<\/code>.<\/p>\n\n\nplayer<\/span>.play<\/span>()<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\npause() , stop()<\/code>.<\/p>\n\n\n\nKey Features<\/h2>\n\n\n\n
Adaptive bitrate streaming<\/h3>\n\n\n\n
CLDVideoPlayer(publicId: \"<your_public_id<\/span>><\/span>\", cloudinary: <your_cloudinary_object<\/span>><\/span>, automaticStreamingProfile: false)<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nTransformations<\/h3>\n\n\n\n
Automatic Subtitles<\/h3>\n\n\n\n
CLDVideoPlayer(url:\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/sp_auto:subtitles_(code_en-US;file_docs:narration.vtt)\/sea_turtle.m3u8\"<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nConclusion<\/h2>\n\n\n\n