From the previous article you could learn how to create audio and video in Flutter. As I promised, this time I’m going to focus on the second part of this topic – playback of video and audio in Flutter. I will show you how to face the most common challenges that playing video and audio in Flutter brings. I’ll give you a few alternative solutions that you can use when the problems occur.
Challenge no. 1 – You have to use a package
The most essential package is the video_player – it can be treated as the official one because it’s hosted on Google repositories and its development is in hands of the Flutter creators. However, the community has proposed its own solutions, which can be divided into 2 categories.
The first one is the encapsulated video_player package, what means that we have additional features to what is provided by Google.
In the second approach on the other hand, we have implemented a completely new proprietary way in which the video is processed.
No support for desktops
The first problem of the video_player is lack of support for desktops – it’s only available for iOS, Android and web. Some issues asking for video_player desktop apps have already been created but for this moment these are P4 label issues so not Google’s top priority.
Some more experienced devs might think that they’re going to handle it in a way that it’s done on the mobile platforms – „I can write a PlatformView by myself, I can program in C++, so I will be able to host the native view in the desktop app and play the video, right?”. The problem is that PlatformViews is also not supported on desktops yet so we have to wait for it. We don’t know when the functionalities can be expected.
The community has faced the expectations by creating a dart_vlc package. VLC is video playback program characterized with its original way of playing the videos instead of using codecs that are included with the operating system. This package works very similarly – it implements libVLC, thanks to which we’re able to play videos on the desktop. Although we should remember that the package is on the LGPL licence so in some cases it can’t be used.
The only problem with the package is that there’s no hardware acceleration. Simply speaking, the issue is that the video that we’re currently playing is not processed by the graphics card but by our computer’s CPU. On weaker hardware configurations, we may experience some performance issues. If we’d like to play the video in 4K for example, the video may lag or have performance issues.
Windows workaround
If we enter a file name, and a file extension in Windows command prompt along with “start” command, we’ll see how the default program for the given file extension is launched. The trick is that we can execute cmd commands from the Flutter framework. We’re using the class Process and the run method, which takes the arguments such as command, parameter runInShell, the workingDirectory path. The file that we want to open must be stored locally, and only then we can open it.
Another iteration that we’ve reached is that in the Windows app, when launching the program, we checked whether the user had VLC installed and added to their environment variables. If not, we displayed a message that without VLC installed, not all program functionalities can work properly. We can use this to open the MP4 file from the internet or run a livestream.
Audio
There is no official solution when it comes to playing audio only in Flutter. Luckily, a just_studio package has been created, which has the Flutter Favorite badge. More or less means that the creators of Flutter recommend us to use this package. Based on my own experience with various packages, this one works best. As you can see, it also supports all the functionalities you need on most platforms.
Challenge no. 2 – The difference between platforms in the video_player
While developing a Flutter app with video, we’ll most likely end up with the video_player package or some kind of overlay for that package. Let’s look at the challenges this package poses in itself then.
First of all, when we see two Android and iOS devices next to each other, it’s very hard to see any difference between the videos on these two platforms from the user’s perspective. However, when we look at how it’s built underneath, we’ll see that iOS uses AVPlayer, while Android uses ExoPlayer. It’s an important information because when we have a platform-specific issue we can debug our code better. On top of that, we can Google platform specific player issues. Thanks to this, we can find answers to our questions and problems faster.
How is it possible that one widget executes different code for different operating systems? Flutter provides us with PlatformView widget. For Android we use AndroidView widget and for iOS we use UIKitView widget. Underneath, the video_player package simply provides the appropriate widgets, and in them, there is the software I wrote about above (AVPlayer / ExoPlayer).
Web app
The main problem with the web is the inability to use dart.io, so we also can’t use the file constructor from the VideoPlayerController class. Using such a constructor will simply cause an exception on the web. So if we use something like this in a mobile app and would like to turn it into a web app, we have to remember to use a different constructor.
Web app & Autoplay
Another problem that may arise is autoplay. As mobile developers, we often take it for granted that when we open a new page and start playing video file, it starts playing immediately after opening the page. The situation may change in the case of the web platform, because depending on the browser configuration and its settings, it may turn out that the user has disabled autoplay. In this case, autoplay may not work, or an exception may appear. If this happens, we can disable the user from playing the video at all, because we won’t give him a play button that will launch the video when the autoplay doesn’t work. So remember to turn off autoplay in your browser and verify if our application also works in this situation.
mixWithOthers
The third problem is that in Video Player we have property mixWithOthers. The way it works is that if we were to play a video, but we also wanted to play the audio file at the same time, we would have to set property to true. Unfortunately, this option is not available on the web, so we will not be able to take advantage of this feature.
Challenge no. 3 – No DRM
The challenge no. 3 is that we don’t have a DRM Solution in Flutter officially. You can associate this acronym with the video game industry and it simply stands for digital rights management. We want to use this type of security when we want to hide our video content behind a paywall. This means that the user has to pay for the content first, and then can view it. In this situation, we also have an open issue with the P3 label, which means that perhaps we’ll get it faster than PlatformViews on desktops.
The community comes to the rescue once again and shares a cap on video_player, which is called better_player. Apart from adding DRMs, it also solves other problems (you can find more information about it in the documentation). When it comes to DRMs, we can use token, Widevine, FairPlay EZDRM.
Search and use alternative solutions
For this moment playback of audio and video in Flutter still needs some developments and implementation of additional features. However, despite those issues, there are some workarounds, alternative solutions proposed by the community, and packages that help to overcome these problems.
If you’re curious about how to trimm, merge, and create or process the videos within Flutter, get back to the first part of this topic and find out how to create audio and video in Flutter.
