1
votes

Un moyen de lire une vidéo ou de lancer la vidéo avec Flutter pour le Web?

Je souhaite lire une vidéo youtube ou accéder à l'URL youtube, mais je ne trouve pas de moyen, car si vous utilisez url_launcher ou video_player, Flutter Web ne pourra pas fonctionner et il est impossible de courir avec Flutter SDK.
Alors, est-ce que je peux laisser l'utilisateur voir la vidéo?

flutter

4 commentaires

Utilisez le package flutter webview. Et ajoutez du HTML intégré

Merci pour le commentaire informatif, comment puis-je faire cela? Désolé, je suis un débutant.

Qu'entendez-vous par flutter pour le Web ? est-ce une application Web ou une application mobile?

C'est une application Web.

4 Réponses :

0
votes

J'ai trouvé un moyen d'ouvrir le lien, mais je ne sais toujours pas comment lire la vidéo.
Je suppose que je devrais attendre qu'il devienne stable.

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

0 commentaires

1
votes

consultez cet exemple ici: Exemple HTML PLATFORM VIEW

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'),
    ),
  ));
}

1 commentaires

Avez-vous une importation fonctionnelle pour l'interface utilisateur dans le flutter non fourchu pour le Web?

0
votes

Après la fusion dans la bibliothèque principale Flutter

J'ai eu du mal avec cela pendant un certain temps, mais actuellement, vous devriez utiliser la bibliothèque 'dart: ui' au lieu de la flutter_for_web_ui version. Cela donne toujours une erreur que vous devez ignorer et exécuter de toute façon.

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'),
        ),
      ));
    }

Voici le problème référencé ui. problème platformViewRegistry

0 commentaires

1
votes

J'ai détaillé ici une solution qui utilise le lecteur vidéo Afterglow .

Le lecteur vidéo Afterglow prend en charge la lecture de vidéos YouTube (et même de Vimeo videos), il servira donc votre cas.

En gros, vous devez modifier le fichier de modèle index.html et interagir avec le DOM en utilisant soit dart: html strong> ou universal_html pour obtenir la lecture de la vidéo souhaitée. Vous devez connaître l'identifiant de la vidéo YouTube que vous souhaitez lire.

index.html ressemblera à:

playYouTubeVideo('5jidaSuRVKw');

Vous aurez besoin d'une méthode playYouTubeVideo comme la suivante:

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
  }
}

Et vous allez lire la vidéo comme ceci:

<!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>

Vous pouvez le remplacer par n'importe quel lecteur vidéo HTML / JS de votre choix, l'approche serait la même.

Avant le 10 décembre 2019 , cette méthode était l'un des seuls moyens de lire des vidéos dans une application Web Flutter. Sur Flutter Interact 2019 , l'assistance Web pour quelques packages, y compris package video_player_web . L'option présentée ci-dessus fonctionne toujours et peut mieux vous servir dans votre cas d'utilisation.

0 commentaires