Any way to play video or launch to the video with flutter for web?

flutter video player full screen
flutter web video player
flutter video player github
chewie flutter
flutter video player aspect ratio
flutter video player in listview
flutter youtube player
flutter embed youtube video

I would like to play youtube video or launch to the youtube url but I can't find a way because if you use url_launcher or video_player, flutter web won't be able to run and it says you can't run with flutter SDK. So is there any way I can let user see the video?


I've detailed here a solution that uses the Afterglow video player.

The Afterglow video player supports playing YouTube videos (and even Vimeo videos), so it will serve your case.

Basically you need to alter the index.html template file and interact with the DOM using either dart:html or universal_html packages to get your desired video playing. You'll need to know the video id of the YouTube video you want to play.

  1. index.html will look like:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Web YouTube Video Player</title>
    <script src="https://cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script></head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
    <a id="triggerYouTubeVideoPlayer" class="afterglow" href="#videoPlayer"></a>
    <video id="youTubeVideoPlayer" width="960" height="540" data-skin="dark">
    </video>
  </body>
</html>
  1. You'll need a playYouTubeVideo method like the following:
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;

void playYouTubeVideo(String withId) {
  if(kIsWeb) {
    final v = html.window.document.getElementById('youTubeVideoPlayer');
    if(v != null) {
      v.setAttribute("data-youtube-id", withId);
      final a = html.window.document.getElementById( 'triggerYouTubeVideoPlayer' );
      if(a != null) {
        a.dispatchEvent(html.MouseEvent('click'));
      }
    }
  } else {
    // we're not on the web platform
    // and should use the video_player package
  }
}
  1. And you'll play the video like this:
playYouTubeVideo('5jidaSuRVKw');

You can replace this with any HTML/JS video player of your choice, the approach would be the same.

Before the 10th of December 2019, this method was one of the only ways of playing videos in a Flutter web app. At Flutter Interact 2019 the web support for a couple of packages, including the video_player_web package. The option presented above still work and may serve you better in your use case.

Play and pause a video, How to use the video_player plugin. Playing videos is a common task in app development, and Flutter apps are no exception. To play videos, the Flutter team � Play video from local asset: To play a local video in a flutter application, we have to specify the path of the video in pubspec.yaml file. After that, we can directly use the path in our application. The video player plugin comes with a special constructor which lets us build a video player controller that play a local video.


check out this example here: HTML PLATFORM VIEW example

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));
}

video_player, In this tutorial, we look at how we can play local videos, network Playing Local, Network Duration: 13:33 Posted: 26-Apr-2018 To play videos, the Flutter team provides the video_player plugin. You can use the video_player plugin to play videos stored on the file system, as an asset, or from the internet. On iOS, the video_player plugin makes use of AVPlayer to handle playback. On Android, it uses ExoPlayer.


I found a way to open the link but I still don't know how to play video. I guess I should wait it to become stable.

import 'dart:html' as html;
onPressed: () {
  html.window.open('https://stackoverflow.com/', 'Dummy');
}

Playing Local, Network and YouTube Videos with the Video Player , Welcome to another Flutter Tutorial, This video explains how to play a video from internet or Duration: 4:59 Posted: 29-May-2019 Flutter plugin for playing or streaming YouTube videos inline. Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API. Supports both Android and iOS platforms.


Post Merge To Main Flutter library

I struggled with this for a while but currently you should be using the 'dart:ui' library instead of the flutter_for_web_ui version. This still gives an error which you should ignore and run anyway.

import 'dart:ui' as ui;

void main() {
  ui.platformViewRegistry.registerViewFactory( // platformViewRegistry will show as error
          'hello-world-html',
          (int viewId) => IFrameElement()
            ..width = '640'
            ..height = '360'
            ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
            ..style.border = 'none');

      runApp(Directionality(
        textDirection: TextDirection.ltr,
        child: SizedBox(
          width: 640,
          height: 360,
          child: HtmlElementView(viewType: 'hello-world-html'),
        ),
      ));
    }

Here is the referenced issue ui.platformViewRegistry issue

Flutter Tutorial - Play Video from Internet and Local assets., Emily Fortuna shows you how to use the WebView widget to avoid . I want to display a Duration: 5:20 Posted: 20-Mar-2019 In today’s world, mobile cameras are the new definition of communication and entertainment. People use the camera to capture still photos or videos to share with friends and family, upload selfies or videos to social network platforms, make video calls, and more.


Using WebViews in Flutter - Flutter In Focus, A tutorial on implementing a video player for your Flutter Web Project. Sign up for 25% off for Duration: 19:45 Posted: 28-Mar-2020 Flutter for web is a fairly new thing over the internet. In this video, I will walk you through with flutter for web and it's step by step guide. Through flutter for web, we can use existing


Flutter Web Video Player, Do you want to write an app that can display a web page without having to open your mobile device's browser? Well anyway, the Flutter team has created a really cool plugin that For a more thorough explanation, check out this video on keys: A button that says 'Get it on, Google Play', and if clicked. There is no way as of this moment to directly generate the web build without making changes which would affect the mobile versions. flutter flutter_web_test: any ## Add these dependencies to


The Power of WebViews in Flutter - Flutter, An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more. List [178 star ] – Step by step tutorial how to build Todo List with Flutter by Andrei Lesnitsky Crop any widget/image in Android, iOS, Web and Desktop by Mahdi K. Fard. Provides low-level access to video playback by Brian Egan. Open up VS Code, and press Ctrl+Shift+P, and start typing flutter, we see that in the list of available actions for Flutter, there is an option that says, Flutter: New Web Project. Select that