huixiang_app/lib/web/web_view/web_content.dart

import 'package:chewie/chewie.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/image_render.dart';
import 'package:chewie/src/chewie_progress_colors.dart' as chewie;
import 'package:flutter/material.dart';
import 'package:flutter_html/src/replaced_element.dart';
import 'package:flutter_html/style.dart';
import 'package:huixiang/retrofit/data/activity.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:video_player/video_player.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class WebContent extends StatefulWidget {

  final Activity activity;
  final Article article;
  final Function exitFull;

  WebContent(this.activity, this.article, this.exitFull);

  @override
  State<StatefulWidget> createState() {
    return _WebContent();
  }

}

class _WebContent extends State<WebContent> {


  @override
  Widget build(BuildContext context) {
    return Html(
      data: widget.activity != null
          ? widget.activity.content
          : widget.article != null
          ? widget.article.content
          : "",
      style: {
        "html": Style(
          backgroundColor: Colors.white
        )
      },
      customImageRenders: {
        base64DataUriMatcher(): base64ImageRender(),
        assetUriMatcher(): assetImageRender(),
        networkSourceMatcher(extension: "svg"):
        svgNetworkImageRender(),
        networkSourceMatcher(): networkImageRender(
          loadingWidget: () {
            return Container();
          },
        ),
      },
      customRender: {
        "video":
            (context, parsedChild, attributes, element) {
          var src = attributes['src'];
          return videoWidget(
              double.tryParse(attributes['width'] ?? ""),
              double.tryParse(
                  element.attributes['height'] ?? ""),
              (src != null &&
                  src != "" &&
                  src.endsWith(".mp4"))
                  ? src
                  : element
                  .children.first.attributes["src"],
              element.attributes["sandbox"]);
        },
        "iframe":
            (context, parsedChild, attributes, element) {
          var src = attributes['src'];
          return videoWidget(
              double.tryParse(attributes['width'] ?? ""),
              double.tryParse(
                  element.attributes['height'] ?? ""),
              (src != null &&
                  src != "" &&
                  src.endsWith(".mp4"))
                  ? src
                  : element
                  .children.first.attributes["src"],
              element.attributes["sandbox"]);
        },
        "audio":
            (context, parsedChild, attributes, element) {
          final sources = <String>[
            if (element.attributes['src'] != null)
              element.attributes['src'],
          ];
          if (sources == null ||
              sources.isEmpty ||
              sources.first == null) {
            return EmptyContentElement();
          }
          return audioWidget(
            attributes['controls'] != null,
            attributes['loop'] != null,
            attributes['autoplay'] != null,
            sources,
            context.style.width ?? 300.w,
          );
        },
      },
    );
  }

  VideoPlayerController videoPlayerController;
  ChewieController chewieAudioController;
  Chewie chewies;

  Widget videoWidget(double width, double height, src, sandboxMode) {
    print("src :  $src");
    chewieAudioController = ChewieController(
      videoPlayerController: videoPlayerController =
          VideoPlayerController.network(
            src,
          ),
      aspectRatio: width / height,
      //宽高比
      autoPlay: false,
      //自动播放
      looping: false,
      //循环播放
      allowFullScreen: true,
      // systemOverlaysAfterFullScreen: [],
      // systemOverlaysOnEnterFullScreen: [],
      // deviceOrientationsAfterFullScreen: [],
      // deviceOrientationsOnEnterFullScreen: [],
      // 拖动条样式颜色
      materialProgressColors: chewie.ChewieProgressColors(
        playedColor: Colors.white,
        handleColor: Colors.white,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.transparent,
      ),
      autoInitialize: true,
    );

    chewieAudioController.addListener(_fullScreenListener);

    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        textScaleFactor: 0.9,
      ),
      child: Container(
        width: MediaQuery.of(context).size.width - 17,
        height: (MediaQuery.of(context).size.width) / (width / height),
        child: chewies = Chewie(
          controller: chewieAudioController,
        ),
      ),
    );
  }

  Future<void> _fullScreenListener() async {
    print("object: isPlaying: ${videoPlayerController.value.isPlaying}");
    print("object: isFullScreen: ${chewieAudioController.isFullScreen}");

    if (!chewieAudioController.isFullScreen) {
      Future.delayed(Duration(seconds: 1), () {
        widget.exitFull();
      });
    }
  }

  Widget audioWidget(showControls, loop, autoplay, src, width) {
    return Container(
      width: width,
      child: chewies = Chewie(
        controller: chewieAudioController = ChewieController(
          videoPlayerController: VideoPlayerController.network(
            src.first ?? "",
          ),
          autoPlay: autoplay,
          looping: loop,
          showControls: showControls,
          autoInitialize: true,
        ),
      ),
    );
  }

  @override
  void dispose() {

    if (chewieAudioController != null) {
      chewieAudioController.pause();
      chewieAudioController.dispose();
      chewieAudioController = null;
    }

    if (videoPlayerController != null) {
      videoPlayerController.pause();
      videoPlayerController.dispose();
    }

    super.dispose();
  }

}