Hi, Dinesh,

2 min readFeb 6, 2020

Considering you’ve got a new Flutter web project set up you’ll work with an index.html looking like this (it’s located in the web folder inside the root of your project):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="new_web_project">
    <link rel="apple-touch-icon" href="/icons/Icon-192.png"> 
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>    
    <title>new_web_project</title>
    <link rel="manifest" href="/manifest.json">
  </head>
  <body>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
      navigator.serviceWorker.register('/flutter_service_worker.js');
        });
      }
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

You need to do the following edits:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="new_web_project">
    <link rel="apple-touch-icon" href="/icons/Icon-192.png"> 
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>                                                     
    <title>new_web_project</title>
    <link rel="manifest" href="/manifest.json">
    <script type=”text/javascript” src=”jwplayer-8.7.6/jwplayer.js”></script>
    <script type=”text/javascript”>jwplayer.key=”key”</script>   
  </head>
  <body>
    <div id="jwPlayer">Loading the player…</div>
    <script type=”text/javascript”>
      function playVideoInJWPlayer(url) {               
        jwplayer("jwPlayer").setup({
          file: url,
          height: 480,
          width: 720
        });
      }
    </script>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/flutter_service_worker.js');
        });
      }
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

Then in your code you’ll make a call to the playVideoInJWPlayer JS function we defined passing the url:

import 'dart:js' as js;void playVideo() {
  String url = "http://commondatastorage.googleapis.com/gtv-videos- bucket/sample/BigBuckBunny.mp4";
  js.context.callMethod(playVideoInJWPlayer, [url]); 
}

You could modify the JS function to accept the width and height as parameters to get more flexibility out of it.

The JS function becomes:

<script type=”text/javascript”>
    function playVideoInJWPlayer(url, w, h) {               
      jwplayer("jwPlayer").setup({
      file: url,
      height: h,
      width: w
    });
  }
</script>

And the Dart function:

void playVideo() {
  String url = "http://commondatastorage.googleapis.com/gtv-videos- bucket/sample/BigBuckBunny.mp4";
  js.context.callMethod(playVideoInJWPlayer, [url, 720, 480]); 
}

If the JS libraries for JWPlayer are loaded correctly and you trigger the playVideo() function then everything should work fine.

Good luck!

Written by Constantin Stan