开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Html内容中的视频不显示在flutter上

在Flutter中，可以使用WebView来显示HTML内容，包括其中的视频。WebView是一个可以加载并显示网页内容的组件，它可以在Flutter应用中嵌入一个浏览器视图。

要在Flutter中显示HTML内容中的视频，可以按照以下步骤进行操作：

导入webview_flutter包：在Flutter项目的pubspec.yaml文件中添加webview_flutter依赖，并运行flutter packages get命令来获取包。
创建一个WebView：在Flutter应用的页面中，使用WebView组件来创建一个WebView实例。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final String htmlContent;

  MyWebView({required this.htmlContent});

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'about:blank',
      onWebViewCreated: (WebViewController webViewController) {
        webViewController.loadUrl(Uri.dataFromString(
          htmlContent,
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8'),
        ).toString());
      },
    );
  }
}

在页面中使用WebView：在需要显示HTML内容的页面中，使用MyWebView组件，并将HTML内容作为参数传递给它。

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String htmlContent = '''
      <html>
        <body>
          <video controls>
            <source src="https://example.com/video.mp4" type="video/mp4">
          </video>
        </body>
      </html>
    ''';

    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Content'),
      ),
      body: MyWebView(htmlContent: htmlContent),
    );
  }
}

这样，Flutter应用就可以加载并显示HTML内容中的视频了。需要注意的是，视频的URL需要是有效的，并且在Flutter应用中能够访问到。

推荐的腾讯云相关产品：腾讯云移动直播（https://cloud.tencent.com/product/mlvb）可以用于在移动应用中实现视频直播功能。

相关搜索:Flutter中的html内容加载在视频中显示html表单 HTML内容的Flutter URL启动器不工作在jQuery中显示实际的HTML内容 flutter:显示(MYSQL)dataBase中的视频 flutter web上的浏览器上未显示内容 HTML5视频无法在iPad上显示在flutter上播放透明背景的视频显示Django中的HTML内容在html页面中显示csv文件的内容在Android Webview上显示html5视频。播放时视频变黑使用JavaScript按类显示html上的内容在html5视频的特定视频时间码更改html内容在Windows窗体上显示HTML内容的最佳方法是什么？在与v-html相同的行上显示更多内容在UI上显示内容的延迟 Flutter中的Udp套接字不接收任何内容在aframe中在视频背景上显示对象如何使用HTML和CSS在视频上居中显示图像？在Pentaho CDE Table组件中显示HTML内容

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter Web：图片加载及跨域问题

在flutter web上也可以使用Image这个widget来加载显示图片。但是涉及到网络图片的时候就可能会出现问题，现象是不显示图片，控制台报错：

02

Flutter进阶篇（7）-- Flutter路由轻量级框架FRouter

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://www.jianshu.com/p/f79bf0fb213c

01

Flutter 2 渲染原理和如何实现视频渲染

声网Agora跨平台开发工程师卢旭辉带来了《Flutter2 渲染原理和如何实现视频渲染》的主题分享，本文是对演讲内容的整理。

02

Flutter Web：如何在页面中使用web原生组件及交互

flutter开发经常会与原生打交道，flutter web也一样，尤其在web开发时，因为flutter web还不成熟，第三方库缺少，很多功能需要依靠web原生来实现，比如音视频，录音等等。用视频举例，需要用html和js来实现一个视频播放器，然后在flutter页面中使用这个播放器，这如何来实现？

04

使用 Flutter 制作地图应用

在本文中，我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。对于本教程，您将不需要 google maps API，因此您无需支付任何费用，因为我们将使用另一个免费 API，所以不用多说，让我们深入研究它。

00

Flutter实现webview与原生组件组合滑动的示例代码

最近在用Flutter写一个新闻客户端, 新闻详情页中的内容需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以组合滑动 .

02

Flutter实际开发bug总结

1.1 安卓release包缺少libflutter.so 1.2 AndroidStudio导入项目后自动变为model,没有Flutter目录 1.3 输入框内容为空时，长按不显示粘贴工具栏 1.4 SWIFT_VERSION '5.0' is unsupported, supported versions are: 3.0, 4.0, 4.2 1.5 复制粘贴面板英文的问题 1.6 调用库的时候报Methods marked with @UiThread must be executed on the main thread.Current thread: XXXX 1.7 用Navigator.of(context).pushNamed(routeName)如何传递参数

04

flutter 起步

Flutter是谷歌的移动UI框架，可以运行在ios与android系统上，可以以完成app的开发，

02

Flutter基础篇（8）-- Flutter for Web详细介绍

Flutter for Web官方的Github库地址：https://github.com/flutter/flutter_web ,此存储库包含面向Web 的 Flutter 分支的源代码。Flutter团队的目标是把Web与iOS和Android一起添加到Flutter SDK中的第一层平台。此存储库中的代码提供实现（几乎）整个Flutter API的纯Web包。

01

如何提高Flutter应用程序的性能

在调用 setState() 方法重建组件时，一定要最小化重建组件，没有变化的组件不要重建，看下面的Demo，这是一个设置页面，

01

每日tips:使用 ListView.separated 添加分隔符

ListView.separated（https://api.flutter.dev/flutter/widgets/ListView/ListView.separated.html）是一个很方便的 API，可以使用它在列表项间添加分隔符。

01

我用flutter做了一个维基How中文版

我在App Store下载了一个Wiki HowTo的应用，觉得挺有意思的。比如，他们搜罗了很多有用的知识：

手把手教你用Flutter做炫酷动画

导读：随着技术的发展，很多网页开发技术都带有动画效果，比如淡入淡出、渐变、变大变小，等等。Flutter中的动画效果可以用酷炫来形容，这也是Flutter的一大特色。现代的应用程序不仅仅需要程序稳定、好用，还需要好看，体验好。那么动画效果是必不可少的。

02

android studio 3.6.1升级后如何处理 flutter问题

死丢丢配置了dart 和flutter插件在 3.5.3时成功运行过flutter工程

01

flutter3_window_chat仿微信桌面端聊天实战

年前有给大家分享一款flutter3.x+dart3手机端聊天App实例。春节期间就又捣鼓了flutter3桌面端开发实践项目。

02

[Flutter] 滑动卡组件

在在本博客中，我们将探讨「Flutter中」的**滑动卡。**我们还将实现一个演示程序，并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。

06

Horizontal viewport was given unbounded height.width.

在写纵向或横向的布局的时候，一不小心就会遇到这个异常，宽度或高度溢出，导致widget不显示。

01

Flutter 大小单位详解

关于Flutter 大小所使用的单位，官方文档没有给出非常明确的解释，因此一直存在模糊的说法，许多从事安卓开发者直接将之解释为安卓开发所用的单位dp，我认为这是非常不明智且不准确的说法，这个不准确不在于实质的数值，而在于概念的混淆！这样极容易对初学者造成误导，从事web前端或iOS原生开发的人，并没有dp的概念，当他们学习Flutter时，必须强行去理解dp的概念，且在iOS或web平台上时也解释为dp，那就是错误的。

00

【Flutter 专题】易忽略的【小而巧】的技术点汇总 (一)

和尚在学习 Flutter过程中遇到很多有趣的小知识点，平时可能不太注意或一些简单直接的小功能点，准备整理一个小系列，方便日后的查找使用。

03

Flutter 高性能原理浅析

Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架.我开始认识Flutter时，经历了三个Flutter重要历史版本.

03

flutter weekly第11期

flutter weekly 是一份免费的每周咨询，可帮助你在 Flutter 开发方面保持领先地位。

01

闲鱼基于Flutter技术的架构演进和创新

最近一段时间一直学习Flutter，也尝试写一下Demo，但是在用的时候。从一开始惊艳到了，觉得写起来很爽，各种UI效果实现起来很棒，而且由于渲染机制，还让双端甚至多端的UI保持一致以及几乎可以和Native先媲美的用户体验。但是慢慢就又发现了许多新的坑，新的问题，确实也很不爽。

02

【flutter】完美解决导入 dart.ui 中缺少 platformViewRegistry.registerViewFactory 方法

很多情景需要使用 package:flutter_web_ui/ui.dart 或者 dart:ui ，比如显示一个网页：

02

# 安装go flutter desktop

除了Flutter Desktop Embedding外还有一个go flutter desktop可以使用flutter开发桌面应用

02

Flutter Wrap & Chip

一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

02

【Flutter】打开第三方 Flutter 项目

在 Flutter SDK 安装完成之后 , 在 flutter\examples 中附带了 13 个项目示例 ;

03

《Flutter》-- 4.Flutter组件基础

Flutter开发中有一个非常重要的理念，即一切皆为组件。Flutter中Widget不仅可以表示UI元素，也可以布局元素、动画、装饰效果。

03

【错误记录】Flutter 构建报错 ( Because xxx requires SDK version ＞=2.12.0-0 ＜3.0.0, versio | Dart SDK 版本低 )

之前遇到过一次 Flutter SDK 设置错误的问题 , 【错误记录】Flutter 插件不兼容 ( requires Flutter SDK version ＞=1.22.0 ＜2.0.0, url_launcher ＞=5.7.7 ＜6.0.0- ) , 这是 Flutter SDK 版本与 Flutter 插件不兼容的问题 ; 更新最新 SDK 解决了问题 ;

02

5分钟彻底搞懂Flutter中PlatFormView与Texture

想要在flutter想显示原生的东东，大家知道，一般有两种方式，一种是PlatformView,另外一种是Texture(俗称外接纹理)。其中PlatformView区分Android和iOS，在Android平上上叫做 AndroidView，而在iOS平台，叫UIKitView。而今天，我要说的是，

【错误记录】Flutter 报错 ( Android Studio 中 main.dart 左侧不显示设备栏 )

为了解决【错误记录】Flutter 构建报错 ( Because xxx requires SDK version ＞=2.12.0-0 ＜3.0.0, versio | Dart SDK 版本低 ) 中的问题 , 更新了 Flutter 与 Dart SDK ;

02

【技术圈】Flutter 1.12、Firefox 71、V8 8.0 一大把新特性来袭

Flutter 1.12 是 1.9.x 的版本在经历 6 次 hotfix 之后，才带来的 stable 大版本更新。该版本解决了 4571 个报错，合并了 1905 份 pr，同时本次发布也是 Flutter 一年内的第五个稳定版本。

05

Flutter 3更新详解

Flutter 3 实现了 Flutter 以移动端为中心扩展到多平台的产品规划，并在今年 Google I/O大会的主题演讲上正式发布，继Flutter 2.10支持Windows 之后，此次发布提供了对 macOS 和 Linux 桌面端的稳定版支持，同时包括 Firebase 集成的改进，增加了与生产力和性能相关的新特性，并对 Apple 芯片提供了支持。

02

Flutter 更新&升级

https://flutter-io.cn/posts/announcing-flutter-1-7-9.html

07

它来了！Flutter3.0新特性全接触

又到了Flutter稳定版发布的时候了--我们非常自豪地宣布Flutter 3! 仅仅三个月前，我们宣布Flutter支持Windows。今天，我们很高兴地宣布，除了Windows之外，Flutter现在在macOS和Linux上也是稳定的!

04

【老孟Flutter】Flutter 2 新增的功能

今天，我们很高兴地宣布Flutter 2的发布。距离Flutter 1.0的发布已经两年多了，但是在很短的时间内，我们已经关闭了24,541期，并合并了765个贡献者的17,039个PR。自9月Flutter 1.22发布以来，我们已经关闭了5807期并合并了298位贡献者的4091个PR。特别感谢我们的志愿者捐助者，他们慷慨地抽出时间来改进Flutter项目。Flutter 2 release 版本前几名志愿者贡献者是xubaolin46个PR，a14n32个PR，专注于使Flutter达到零安全，hamdikahloun具有20个PR，改善了Flutter插件的数量。但是，不仅仅是编码员为Flutter项目做出了贡献。一大批志愿者PR评审人员还负责评审1525个PR，包括hamdikahloun（再次！），CareF和YazeedAlKhalaf（16个！）。Flutter确实是社区的一项工作，如果没有问题提出者，PR贡献者和代码审查者，我们就不可能进入第2版。此版本适用于所有人。

02

Flutter实战 | 从 0 搭建「网易云音乐」APP（八、我的页面）

本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

00

Flutter中的html内容加载

上一篇文章Flutter 中的下拉刷新和上拉加载中，我介绍了如何在Flutter中实现下拉刷新和上拉加载的效果，今天我们继续以上文中的代码为例，来介绍如何加载HTML文档内容。

04

Flutter 2 正式出道（一）

相信不少人昨晚熬夜奋战，观看了Flutter Engage大会，Flutter团队也正式官宣了Flutter 2。从Flutter 1.0正式版到Flutter 2差不多有两年多一些的时间。但在这么短的时间里，Flutter团队在765个贡献者的贡献下共关闭了24541个issue，合并了17039个PR。从9月份的Flutter 1.22开始，团队在298个贡献者的贡献下共关闭了5807个issue，合并了4091个PR。

01

Flutter中富文件标签的解决方案

在 Flutter 中，有点发愁，因为 Flutter 提供的 Text 与 RichText 还解析不了这种格式的，但是你也不能使用 WebView 插件，如果使用了，你会在每一个Item中嵌入一个浏览器内核，再强的手机，也会卡，当然肯定不能这样做，因为这样就是错误的做法。

01

前端开发工具总结

主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。

02

2020Android面试心得：斩获3个大厂offer后，大厂常考知识点&面试技巧出炉，等你来拿！

历时一个半月，斩获3个大厂offer（京东、新浪、滴滴），这里进行下简单的总结，希望能帮助到大家。

02

「简单实战」YouTube Iframe API 的使用

业务需求需要在自己的网页上嵌入油管（ youtube ）上的视频，所以去踩了油管 IFrame Player API 的坑。其实和大多数国内视频网站的 ifram Embed 方式是相似，比如说爱奇艺、腾讯视频、优酷等。在这些视频网站上你会发现都有分享功能，其中有一项就是通用代码。油管提供的 IFrame Player API 也是类似的方案。

04

干货 | 三种主流快平台技术测评，你更青睐谁？

2021年3月3号，Google宣布Flutter 2：Flutter的重大升级，使开发人员能够为任何平台创建美观，快速且可移植的应用程序。针对Web，移动和台式机构建的下一代Flutter。用户可以使用相同的代码库将本机应用程序发布到五个操作系统：iOS，Android，Windows，macOS和Linux；Windows Vista，Windows XP和Windows XP。以及针对Chrome，Firefox，Safari或Edge等浏览器的网络体验。Flutter甚至可以嵌入到汽车，电视和智能家电中，为环境计算世界提供最普遍和最便携式的体验。

02

在 Node.js 上运行 Flutter Web 应用和 API[每日前端夜话0xDC]

大量的跨平台应用开发框架，使你可以编写一次代码，然后在 Android，iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架，例如 Ionic，Xamarin 和 React Native。另一个相对较新的框架是 Flutter。

01

打造前端瑞士军刀，为你开发路上披荆斩棘

主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。

01

Flutter实战 | 从 0 搭建「网易云音乐」APP（七、歌词（二））

本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

00

牛赞：音视频前端跨平台技术应用

Flutter是近两年大火的跨终端框架，实时音视频因为疫情的缘故也越来越融入到人们的日常工作生活中，如线上会议、在线教育等。两者结合起来可以碰撞起什么样的火花呢？利用Flutter实时音视频SDK，我们可以快速开发一个跨平台的会议、娱乐、教育等APP。LiveVideoStackCon 2021北京站邀请到腾讯云高级工程师——牛赞，为我们分享利用Flutter如何进行实时音视频渲染，并深入底层，优化视频渲染的性能。文 | 牛赞整理 | LiveVideoStack 我来自腾讯云音视频，本次分享主题

01

【Flutter】362- 让前端开发者失业的技术，Flutter Web 初体验

Flutter 是一种新型的 “客户端” 技术。它的最终目标是替代包含几乎所有平台的开发：iOS，Android，Web，桌面；做到了一次编写，多处运行。掌握 Flutter web 可能是 Web 前端开发者翻盘的唯一机会。

02

html多媒体

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

03

为什么说Flutter可能不是下一件大事？

我注意到最近有很多文章将 Flutter 宣传为“下一件大事”（next big thing）。一些人甚至详细解释了 Flutter 为什么会替代 React Native 成为开发人员首选的跨平台技术。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭