How to play embedded videos in mobile applications using Flutter

An application of using JavaScript in Flutter.

JavaScript and Flutter

Lately, I have been working for a client who wanted me to do develop a cross-platform mobile application for video streaming using flutter, during the last stage of the work, we thought about the cost of hosting videos which is high if you compare it to a YouTube channel with thousands of videos that costs the YouTuber 0€.

After that, I was searching for free video hosting to use like the ones used by bloggers and other websites, and I found many like GoUnlimited, ok.ru, fembed, vidBm, YouTube, and a long list. All of these services are for free and they pay you for views and ads embedded in each video. But unfortunately, their URLs are only used inside browsers and web-views.

We need a way to convert or to get the direct session link to that free hosted video and use it inside a flutter app.

Reasons why using these services inside a mobile application?

1. Saving money by using free hosting services!
2. Saving the time for preparing the server to host videos.
3. Gives you links with different resolutions which is very good for users who have a poor connection.
4. Gives you thumbnails for each video that you can use it in your app.

Two ways to play embedded videos in Flutter application.

• (1) Write an API that responds to you with the required links to use inside the app. For example writing a PHP function that analyzes the HTML of the embedded video link and gives you back the links to different resolutions like 720, 1048, etc., you can find many open source APIs on Github used for similar purposes or write your own one by understanding the idea of how to get a direct link by following the steps in the next point.

Note: your server could be banned due to the high number of requests to get direct links.

• (2) Using JavaScript code inside flutter:
  Simply you need a way to send data from the HTML page to Flutter. I searched for a way to use JavaScript inside flutter to post data from a webpage to flutter and I found a package for that purpose.

get direct links for embedded videos

Step 1: Let’s add the package to .yaml file

dependencies: 
interactive_webview: ^0.1.2

interactive_webview is a great package, thanks to its developers. it used as a bridge to send data from hidden web-view to flutter, it's similar to use the console in your browser to write JavaScript code.

Step 2: Create a JavaScript file.

This JavaScript file will be used to send data from the web-view to our Flutter application.

For example, you want to send "hello world" to our Flutter UI you will need nativeCommunicator to post it to Flutter. On the other hand in Flutter, you have a listener where you can get the data after loading the web-view is Finished.

// in js
var data = "hello world";
nativeCommunicator.postMessage(data);
//in dart
_webView.didReceiveMessage.listen((data) {}

in our case, we have the following code:

JavaScript to get embed video links

Notice that we get the video source link directly or by unPacking packed function.

function(p,a,c,k,e,d)

Note: you can find more different ways to get the links for each straming service, and not all services has the same way to get the direct link.

Step 2: Create your JS service to handle the data from the web-view.

After loading the page is finished you must load the JavaScipt file before calling any of its functions. Then, you can call any JavaScript function as eval to evaluate it.

• Create webview object.

final _webView = InteractiveWebView();

• Loading the webview.

//loading the page 
_webView.loadUrl(url);

• Loading the JavaScript code after webpage loading is finished.

//loading the javascript on WebViewState.didFinish is true
final script = await rootBundle.loadString("assets/injection.js", cache: false);
_webView.evalJavascript(script);

• Calling JavaScript function on dart side to run JavaScript code in the webview.

//call javascript function from flutter
_webView.evalJavascript("goGetPackedFunctionLinks();");

Closing remarks

Embedded video player source code has simple code to get direct links that you can use it directly in any video player in Flutter.

To learn more about Najy, visit his pages on GitHub and LinkedIn.