我在Flutter网页HTML查看器上无法看到嵌入的YouTube或PDF。

huangapple go评论72阅读模式
英文:

I can't see embed youtube or pdf on flutter web html viewer

问题

以下是您提供的内容的中文翻译:

"Can anyone help me with this please? I'm using Flutter 3.7.9, when I add something embeded (pdf or youtube video) with my html editor, and then try to view it, I only can see it on mobile, doesn't show up on flutter web.
I tried using other things like easy web view but It's doesn't seem to work with these version of my pubspec.yaml and I can't change much of those versions or the html editor advanced will not work correctly.

this is when I addded embed youtube video and embed pdf:
我在Flutter网页HTML查看器上无法看到嵌入的YouTube或PDF。

but this is what shows up in my preview page ( on web ), only text, images..etc:

我在Flutter网页HTML查看器上无法看到嵌入的YouTube或PDF。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
export 'htmleditor_model.dart';
export 'htmleditor_model.dart';

class MyPreviewPage extends StatelessWidget {
  final String htmlText;

  const MyPreviewPage({Key? key, required this.htmlText}) : super(key: key);

  @override
  Widget build(BuildContext context) {

/*    if (kIsWeb) {
      return Scaffold(
   appBar: AppBar(
          title: const Text('Preview Page'),
        ),
        body: SingleChildScrollView(
          child: HtmlWidget('$htmlText'),
        ),
      );
    } else {*/

      return Scaffold(
        appBar: AppBar(
          title: const Text('Preview Page'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            child:  Html(
              data: htmlText,  
          ),
        ),
      )
      );
    }
  } 

This is my pubspec.yaml, I can't change much of the versions because I'm using the html_editor_advanced and it seems to only work with these versions:

name: text_editor_project
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=2.12.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  auto_size_text: 3.0.0
  cached_network_image: 3.2.1
  flutter_animate: 1.0.0
  flutter_cache_manager: 3.3.0
  font_awesome_flutter: 10.1.0
  from_css_color: 2.0.0
  go_router: 3.1.0
  google_fonts: 3.0.1
  html_editor_enhanced: ^2.5.1
  intl: 0.17.0
  json_path: 0.4.1
  page_transition: 2.0.4
  provider: 6.0.4
  shared_preferences: 2.0.15
  sqflite: 2.2.0+2
  timeago: 3.2.2
  url_launcher: 6.1.5
  firebase_core: ^2.5.0
  firebase_auth: ^4.2.6
  cloud_firestore: ^4.4.4
  lottie: ^2.2.0
  google_sign_in: ^6.0.1
  google_sign_in_web: ^0.11.0+1
  flutter_windowmanager: ^0.2.0
  image_picker: ^0.8.7+1
  firebase_storage: ^11.1.0

  cupertino_icons: ^1.0.0
  flutter_widget_from_html: ^0.10.0
  flutter_html: 3.0.0-alpha.5
  #sanitize_html: ^2.0.0
  #video_player_web: ^2.0.16
  #flutter_html_video: ^3.0.0-alpha.4
  #flutter_html_iframe: ^3.0.0-beta.2

dependency_overrides:
  provider: 6.0.0
  webview_flutter_android: 2.10.3
  webview_flutter_platform_interface: 1.9.5
  webview_flutter_wkwebview: 2.9.5

dev_dependencies:

  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/fonts/
    - assets/images/
    - assets/videos/
    - assets/audios/
    - assets/lottie_animations/
    - assets/rive_animations/
    - assets/pdfs/
英文:

Can anyone help me with this please ? I'm using Flutter 3.7.9 , when I add something embeded (pdf or youtube video ) with my html editor , and then try to view it, I only can see it on mobile , doesn't show up on flutter web.
I tried using other things like easy web view but It's doesn't seem to work with these version of my pubspec.yaml and I can't change much of those versions or the html editor advanced will not work correctly.

this is when I addded embed youtube video and embed pdf :
我在Flutter网页HTML查看器上无法看到嵌入的YouTube或PDF。

but this is what shows up in my preview page ( on web ) , only text,images..etc :

我在Flutter网页HTML查看器上无法看到嵌入的YouTube或PDF。

import &#39;package:flutter/foundation.dart&#39;;
import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter_html/flutter_html.dart&#39;;
export &#39;htmleditor_model.dart&#39;;
export &#39;htmleditor_model.dart&#39;;
class MyPreviewPage extends StatelessWidget {
final String htmlText;
const MyPreviewPage({Key? key, required this.htmlText}) : super(key: key);
@override
Widget build(BuildContext context) {
/*    if (kIsWeb) {
return Scaffold(
appBar: AppBar(
title: const Text(&#39;Preview Page&#39;),
),
body: SingleChildScrollView(
child: HtmlWidget(&#39;$htmlText&#39;),
),
);
} else {*/
return Scaffold(
appBar: AppBar(
title: const Text(&#39;Preview Page&#39;),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child:  Html(
data: htmlText,  
),
),
)
);
}
} 

This is my pubspec.yaml , I can't change much of the versions because I'm using the html_editor_advanced and it seems to only work with these version :

name: text_editor_project
description: A new Flutter project.
publish_to: &#39;none&#39;
version: 1.0.0+1
environment:
sdk: &quot;&gt;=2.12.0 &lt;3.0.0&quot;
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
auto_size_text: 3.0.0
cached_network_image: 3.2.1
flutter_animate: 1.0.0
flutter_cache_manager: 3.3.0
font_awesome_flutter: 10.1.0
from_css_color: 2.0.0
go_router: 3.1.0
google_fonts: 3.0.1
html_editor_enhanced: ^2.5.1
intl: 0.17.0
json_path: 0.4.1
page_transition: 2.0.4
provider: 6.0.4
shared_preferences: 2.0.15
sqflite: 2.2.0+2
timeago: 3.2.2
url_launcher: 6.1.5
firebase_core: ^2.5.0
firebase_auth: ^4.2.6
cloud_firestore: ^4.4.4
lottie: ^2.2.0
google_sign_in: ^6.0.1
google_sign_in_web: ^0.11.0+1
flutter_windowmanager: ^0.2.0
image_picker: ^0.8.7+1
firebase_storage: ^11.1.0
cupertino_icons: ^1.0.0
flutter_widget_from_html: ^0.10.0
flutter_html: 3.0.0-alpha.5
#sanitize_html: ^2.0.0
#video_player_web: ^2.0.16
#flutter_html_video: ^3.0.0-alpha.4
#flutter_html_iframe: ^3.0.0-beta.2
dependency_overrides:
provider: 6.0.0
webview_flutter_android: 2.10.3
webview_flutter_platform_interface: 1.9.5
webview_flutter_wkwebview: 2.9.5
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/fonts/
- assets/images/
- assets/videos/
- assets/audios/
- assets/lottie_animations/
- assets/rive_animations/
- assets/pdfs/

答案1

得分: 1

我升级了pubspec.yaml文件,它有效了,还降级了一些flutter_html,原来flutter_html_iframe引起了问题。感谢所有试图帮助的人,希望这对于遇到相同问题的人有所帮助。

英文:

I upgraded the pubspec.yaml file and it worked and also downgraded some of the flutter_html one, turns out flutter_html_iframe is causing an issue.
Thanks to everyone who is trying to help & I hope this benefit anyone who got the same issue.

name: text_editor_project
description: A new Flutter project.
publish_to: &#39;none&#39;
version: 1.0.0+1
environment:
sdk: &quot;&gt;=2.12.0 &lt;3.0.0&quot;
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
auto_size_text: 3.0.0
cached_network_image: 3.2.1
flutter_animate: 1.0.0
flutter_cache_manager: 3.3.0
font_awesome_flutter: 10.1.0
from_css_color: 2.0.0
go_router: 3.1.0
google_fonts: 3.0.1
html_editor_enhanced: ^2.5.1
intl: 0.17.0
json_path: 0.4.1
page_transition: 2.0.4
provider: 6.0.4
shared_preferences: 2.0.15
sqflite: 2.2.0+2
timeago: 3.2.2
url_launcher: 6.1.5
firebase_core: ^2.5.0
firebase_auth: ^4.2.6
cloud_firestore: ^4.4.4
lottie: ^2.2.0
google_sign_in: ^6.0.1
google_sign_in_web: ^0.11.0+1
flutter_windowmanager: ^0.2.0
image_picker: ^0.8.7+1
firebase_storage: ^11.1.0
cupertino_icons: ^1.0.0
#flutter_widget_from_html: ^0.10.0
universal_html: ^2.2.1
flutter_html: ^2.1.2
#sanitize_html: ^2.0.0
#video_player_web: ^2.0.16
#flutter_html_video: ^3.0.0-alpha.4
#flutter_html_iframe: ^2.0.
dependency_overrides:
provider: ^6.0.5
webview_flutter_android: ^3.8.0
webview_flutter_platform_interface: ^2.3.1
webview_flutter_wkwebview: ^3.5.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/fonts/
- assets/images/
- assets/videos/
- assets/audios/
- assets/lottie_animations/
- assets/rive_animations/
- assets/pdfs/

huangapple
  • 本文由 发表于 2023年6月18日 23:22:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76501241.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定