Flutter and Video Integration

Video content has become the driving force behind user engagement and brand success. Mobile devices have risen to the forefront as the primary medium for consuming video content, making it crucial for app developers to harness the power of video.

This article explores the significance of video in the digital world, the role of cross-platform frameworks like Flutter, and how to seamlessly integrate video into your Flutter app using the cloudinary_flutter SDK and the innovative CLDVideoPlayer class.

Video content has revolutionized the way brands engage with their audiences. It has become the preferred format for creating awareness, selling products or services, and fostering trust among consumers. With the ubiquitous availability of smartphones and the expansion of high-speed 5G internet, a substantial portion of screen time is now devoted to mobile devices. In fact, approximately 90% of this mobile screen time is spent within apps.

The synergy between video and mobile apps is undeniable, with various strategies employed by brands to incorporate video experiences:

1. Product demonstrations. Video is utilized in shopping apps to showcase products and highlight their key features, boosting sales conversions.
2. How-to guides. Service-oriented and customer support apps use videos to explain product usage in daily life or offer troubleshooting guidance, enhancing customer experience and retention.
3. User-generated content (UGC). User-generated video reviews build customer trust and loyalty, with apps streamlining the process for users to record and upload reviews for products, restaurants, or tourist destinations.
4. Tutorials. Apps in the fitness and education sectors increasingly rely on video to provide on-demand tutorials and live classes.

Cross-platform development frameworks like Flutter have become essential for addressing the diverse ecosystem of mobile devices and operating systems. Here’s why they are crucial for app developers:

1. Consistency across platforms. Flutter ensures a uniform user experience across both Android and iOS, reducing the need for separate codebases and simplifying app maintenance.
2. Faster development. With Flutter, developers can write code once and deploy it on multiple platforms, saving time and resources.
3. Rich ecosystem. Flutter offers a rich ecosystem of prebuilt widgets and libraries, facilitating the development process and enabling the integration of advanced features like video playback.
4. Cost efficiency. Developing a single app for multiple platforms can significantly reduce development costs and resources.

While the integration of video playback in Flutter apps is promising, it comes with unique challenges:

1. Device diversity. Flutter apps run on devices with varying screen sizes and resolutions, necessitating optimizations for seamless video player performance.
2. Network variability. Users connect to the internet under diverse network conditions, requiring adaptive streaming and network disruption handling for a smooth video experience.
3. Video formats. Supporting a wide range of video formats is complex, necessitating format conversion, transcoding, or the use of versatile codecs for compatibility.

Now, let’s dive into the technical aspects. For Flutter developers seeking to seamlessly incorporate video playback into their apps, the CLDVideoPlayer class available within the cloudinary_flutter SDK offers a streamlined solution. This class simplifies the integration process, ensuring a consistent and engaging video experience for users across different platforms.

Begin by integrating the cloudinary_flutter SDK into your Flutter project through pubspec.yaml:

dependencies:
cloudinary_flutter: ^1.1.0
cloudinary_url_gen: ^1.0.0Code language: CSS (css)

Set up your Cloudinary account and initialize it in your app. You’ll need only your cloud name.

Cloudinary cloudinary = CloudinaryObject.fromCloudName(cloudName: 'demo');Code language: JavaScript (javascript)

Now, let’s create an instance of CldVideoController and set it publicIdto the video you want to play.

final CldVideoController controller = CldVideoController(publicId: publicId);Code language: PHP (php)

You can also add transformations easily to adjust the video on the fly, without the need for graphic designers and fancy editing tools, all the information about video transformations can be found here.

final CldVideoController controller = CldVideoController(publicId: publicId, transformation: Transformation().effect(Effect.reverse()));Code language: PHP (php)

Or you can just send a URL.

final CldVideoController controller = CldVideoController.networkUrl(Uri.parse('<your_url>'));Code language: PHP (php)

Now that we have the player initialized we want to show it on screen.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Video',
home: Scaffold(
body: Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}Code language: JavaScript (javascript)

The child of the AspectRatio widget is our VideoPlayer. We’ll send our CLDVideoController to it.

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

controller.play();Code language: CSS (css)

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

And that’s it! You’ve successfully integrated video playback into your Flutter app using the cloudinary_flutter SDK and the CLDVideoController class.

The CLDVideoPlayer comes with an adaptive bit rate (ABR) mechanism enabled by default. This means it automatically receives a manifest file in the .m3u8 format and selects the most appropriate playback link for your video.

If you prefer to disable the ABR feature, you can do so by setting the automaticStreamingProfile flag to false. This gives you the ability to manage the adaptive streaming behavior of the video player and make precise adjustments to your video playback experience.

_controller = CldVideoController(publicId: 'sea', transformation: Transformation()..roundCorners(RoundCorners.max()), automaticStreamingProfile: false);Code language: JavaScript (javascript)

You can enhance your video playback further by combining various transformations like trimming, overlaying images, normalizing audio, and more while using the automatic streaming profile. However, it’s important to note that these transformations need to be applied sequentially in a chained manner. For additional details, you can find more information here.

The surge in mobile video consumption, largely driven by social networks, presents a remarkable opportunity for Android developers. With the CLDVideoPlayer class from the cloudinary_android SDK at your disposal, you have the power to seamlessly integrate video playback features into your applications. This allows you to provide your users with a captivating and immersive video experience, ensuring their continued engagement with your app. Embrace the mobile video revolution and use it to take your Android app to new levels of success!

If you found this article helpful and want to discuss it in more detail, head over to Cloudinary Community forum and its associated Discord.