Hi, Dinesh,

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store