How to play video using flutter_webview_plugin

Question

I'm trying to play video stored in google drive in flutter app. I embed the video and I got the url. when I try to play the video it not work in android while in IOS it works well. Is the plugin don't work will in android or I my way to use plugin is wrong?

flutter_webview_plugin: ^0.3.0+2

Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        title: Text("play video"),
      ),
      url: "https://drive.google.com/file/d/1O8WF2MsdyoKpQZE2973IFPRpqwKUjm_q/preview",
      initialChild: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }

score 3 · Accepted Answer · answered Mar 07 '19 at 15:10

3

I have faced this issue before, where the video does not play (only audio) on any emulator on android, but does work normally on a real device.

The alternative approach towards playing videos natively on flutter is to use the video_player package that enables direct video playing without the use of a webview. Using that, you can play network videos in a much simpler way.

 _controller = VideoPlayerController.network(
        'http://yourvideo.com/videolink')
      ..initialize().then((_) {
        setState(() {});
      });

Complete example and guideline here.

answered Mar 07 '19 at 15:10

Esh

505
5
17

I tried to use this plugin with google drive URL but don't work. I got white page [I test it in real device]. I don't no what is the problem – Mar 07 '19 at 15:43
Try the same thing, but this time load the video from firebase (cloud storage) instead. I think that would be a better approach. Possibly, your Google Drive link doesn't directly return a video file. Rather returns a page that contains the file. – Esh Mar 07 '19 at 16:30
Basically, the idea is to host it in a location that will return a direct file. When you store it in Google Drive - that doesn't happen. If you have any hosting, that will work too! Test it with this [link](https://sachinchoolur.github.io/lightgallery.js/static/videos/video2.mp4) first, and see if it works. If it does, then you will just need to host your video like this. – Esh Mar 09 '19 at 14:14
`react-native-webview` has similar or internally related problem not fixed to date: https://github.com/react-native-community/react-native-webview/issues/172 https://github.com/react-native-community/react-native-webview/issues/290 – Eugene Gr. Philippov Mar 20 '20 at 21:26
Similar problems seem to exist in native Android Java WebView: https://stackoverflow.com/questions/19031908/unable-to-play-video-using-webview https://stackoverflow.com/questions/19246615/html-video-not-playing-in-android-webview – Eugene Gr. Philippov Mar 20 '20 at 21:43

score 0 · Answer 2 · answered Nov 14 '21 at 08:45

0

Here is the solution StackOverflow link You can use flutter_inappwebview

answered Nov 14 '21 at 08:45

Luqman Tuke

119
2
7

score 0 · Answer 3 · answered Jun 10 '23 at 00:47

I faced the same problem and I found that the problem was in the link itself. to make it work you will need to change the link like this: you should start the link with: https://drive.google.com/uc?export=view&id= and then add the ID from the original link, and here is a method I made to automate this for you

String enableDriveURL(String firstLink) {
var splitted = firstLink.split("/");
var id = splitted[splitted.length - 2];
var firstPart = "https://drive.google.com/uc?export=view&id=";
var finalURL = firstPart + id;
return finalURL;

} I hope this helped!

score -1 · Answer 4 · answered Jul 18 '21 at 21:54

-1

You Should Activate The Accelerated Options in Android Manifest Like this https://i.stack.imgur.com/5J6JN.png

answered Jul 18 '21 at 21:54

Hussein

95
1
1
5

How to play video using flutter_webview_plugin

4 Answers4