flutter Html 加载video适配

最新推荐文章于 2023-11-24 09:32:54 发布

feiyue0823

最新推荐文章于 2023-11-24 09:32:54 发布

阅读量1k

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/feiyue0823/article/details/125042081

版权

Flutter 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

该博客介绍了如何解决HTML中video元素在渲染时出现的视图拉伸问题。通过使用Flutter的Chewie库和VideoPlayer控制器，实现了自定义视频布局，确保视频按比例显示。代码示例展示了如何初始化和配置这两个控制器，以及如何从HTML数据中提取视频源。此外，还特别提到若存在多个视频，需要为每个视频创建单独的控制器。

摘要由CSDN通过智能技术生成

场景：Html控件data中含有video样式的，默认情况下video会出现视图拉伸，需要对video

进行调整。以下代码仅支持data中含有一个视频，多个视频的话，需要对应多个controller。

VideoPlayerController videoPlayerController;
ChewieController chewieController;
bool initialized = false;
  
Widget webViewsWidget() {
    double w = ScreenUtils.screenW(context);
    return Container(
      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Html(
        // 渲染的数据
        data: model.content,
        // 自定义样式
        style: {
          'video': Style(
            height: w / 1.5,
          ),
        },
        customRender: {
          "video": (RenderContext context, Widget child) {
            return videoLayout(context);
          },
          "flutter": (RenderContext context, Widget child) {
            return FlutterLogo(
              style: (context.tree.element.attributes['horizontal'] != null)
                  ? FlutterLogoStyle.horizontal
                  : FlutterLogoStyle.markOnly,
              textColor: context.style.color,
              size: context.style.fontSize.size * 5,
            );
          },
        },
        onImageError: (exception, stackTrace) {
          print(exception);
        },
      ),
    );
  }

  Widget videoLayout(RenderContext context) {
    // print(context.tree.element.innerHtml);
    //<source src="https://test.com/73/4de7d2072317543de16a387501405d.mp4" type="audio/mp4" />
    String data = context.tree.element.innerHtml;
    String url;
    if (data.isNotEmpty) {
      List list = data.split('"');
      for (String s in list) {
        if (s.contains('https://') || s.contains('http://')) {
          url = s;
        }
      }
    }
    if (url.isEmpty) {
      return SizedBox();
    }
    if (!initialized) {
      videoPlayerController = VideoPlayerController.network(url);
      videoPlayerController.initialize().then((value) {
        print(videoPlayerController.value.size);
        initialized = true;
        chewieController = ChewieController(
          allowFullScreen: true,
          //是否允许全屏
          videoPlayerController: videoPlayerController,
          aspectRatio: videoPlayerController.value.size.width /
              videoPlayerController.value.size.height,
          //宽高比
          autoPlay: false,
          //自动播放
          looping: false, //循环播放
        );
        setState(() {});
      });
    }
    return initialized
        ? Center(
      child: Chewie(
        controller: chewieController,
      ),
    )
        : Container(
      color: Colors.grey,
    );
  }