Mobile Video Revolution: How-to Guide for Using Cloudinary’s iOS Native Video Player

In the ever-evolving landscape of mobile technology, one thing has become abundantly clear: Video has taken center stage. Whether it’s 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.

It’s no longer a secret that video content increases online user engagement and conversion rates. According to the Content Marketing Institute, video is the #1 content format used by brands to drive awareness, sell products or services, and build consumer trust. 

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). 

Video and mobile apps are truly a match made in heaven. There are several ways brands are embedding video experiences in their mobile apps: 

1. Product demonstrations. Shopping apps often leverage video to showcase products, highlight key benefits or important features that boost sales conversion. 
2. How-to guides. Service-oriented or customer support apps use videos to explain how to use a product in daily life or provide troubleshooting tips. This helps improve customer experience and retention. 
3. User-generated content (UGC). User-generated video reviews are a great way to build customer trust and loyalty. Mobile apps make it even easier for consumers to capture and upload reviews for products, restaurants, or tourist places.   
4. Tutorials. Brands within fitness or education industries are increasingly leveraging video to provide on-demand tutorials and live classes through mobile apps. 

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’ll explore some of the key hurdles that developers often encounter:

1. Compatibility and device fragmentation. 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.

2. Network conditions. 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.

3. Video formats. 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.

4. Cross-platform compatibility. 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.

5. Performance optimization. Ensuring that the video player is resource-efficient, doesn’t drain the device’s battery, and performs well under various conditions is an ongoing task.

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. 

Here’s how you can get started:

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.

CocoaPods:

pod 'Cloudinary', '~> 4.0'Code language: JavaScript (javascript)

Set up your Cloudinary account and initialize it in your app. You’ll need your cloud name and API key for this.

let config = CLDConfiguration(cloudName: "CLOUD_NAME", apiKey: "API_KEY")

let cloudinary = CLDCloudinary(configuration: config)Code language: JavaScript (javascript)

Now, let’s create an instance of CLDVideoPlayer and set its publicId to the video you want to play.

CLDVideoPlayer(publicId: "<your_public_id>", cloudinary: <your_cloudinary_object>)Code language: HTML, XML (xml)

Or you can just send a URL.

CLDVideoPlayer(url:"<your_url>")Code language: HTML, XML (xml)

You can add CLDVIdeoPlayer to an AVPlayerLayer.

@IBOutlet weak var videoView: UIView!

let player = CLDVideoPlayer(publicId: "<your_public_id>", cloudinary: <your_cloudinary_object>)

let playerLayer = AVPlayerLayer(player: player)

videoView.backgroundColor = .black

playerLayer.frame = self.videoView.bounds

playerLayer.videoGravity = .resizeAspectFill

videoView.layer.addSublayer(playerLayer)Code language: CSS (css)

You can also add CLDVideoPlayer to an AVPlayerViewController.

@IBOutlet weak var videoView: UIView!

let player = CLDVideoPlayer(publicId: "<your_public_id>", cloudinary: <your_cloudinary_object>)

let playerController = AVPlayerViewController()

playerController.player = player

addChild(playerController)

playerController.videoGravity = .resizeAspectFill

videoView.addSubview(playerController.view)

playerController.view.frame = videoView.bounds

playerController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]

playerController.didMove(toParent: self)Code language: CSS (css)

To play the video you can just call the play()function.

player.play()Code language: CSS (css)

You can also call various other actions such as pause() , stop().

And that’s it! You’ve successfully integrated video playback into your iOS app using the iOS Native Video Player from Cloudinary.

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 file and selects the most suitable playback link for your video. 

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.

CLDVideoPlayer(publicId: "<your_public_id>", cloudinary: <your_cloudinary_object>, automaticStreamingProfile: false)Code language: HTML, XML (xml)

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.

If subtitles are enabled via URL, they will be automatically shown by the player. The following link will play a video with English subtitles.

CLDVideoPlayer(url:"https://res.cloudinary.com/demo/video/upload/sp_auto:subtitles_(code_en-US;file_docs:narration.vtt)/sea_turtle.m3u8")Code language: JavaScript (javascript)

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. 

To harness the mobile video revolution and take your iOS app to the next level, get started here.