You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Web无法显示嵌入的YouTube视频与PDF问题求助

Flutter Web端无法展示html_editor_enhanced嵌入的YouTube视频/PDF内容

使用Flutter 3.7.9版本,通过html_editor_enhanced编辑器添加嵌入的YouTube视频或PDF内容后,移动端可正常查看,但Flutter Web端预览页面仅显示文本、图片等内容,嵌入内容无法展示。

尝试过使用easy_web_view,但它与当前pubspec.yaml中的版本不兼容,且由于html_editor_enhanced仅适配当前依赖版本,无法对版本进行过多修改。

效果截图

  • 嵌入内容展示效果(移动端):
    嵌入内容展示效果

  • Web端预览效果:
    Web端预览效果

预览页面代码

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

当前pubspec.yaml内容

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/

内容的提问来源于stack exchange,提问作者mabt

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 14:14:54