webview_flutter加载HTML5 Video无自动缩略图问题求助

针对Android端显示灰色背景、iOS端无缩略图的问题，可通过以下几种方式解决：

一、配置WebView平台专属参数 #

Android端配置 #

Android的WebView默认部分设置会影响视频缩略图加载，需开启相关权限与优化项：

_controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://www.w3schools.com/html/html5_video.asp'))
  ..androidSettings
    // 允许媒体无需用户手势即可播放，辅助缩略图生成
    ..setMediaPlaybackRequiresUserGesture(false)
    // 启用DOM存储，适配部分依赖该特性的视频网站
    ..setDomStorageEnabled(true)
    // 允许文件访问
    ..setAllowFileAccess(true)
    // 适配页面缩放，确保视频元素正常渲染
    ..setLoadWithOverviewMode(true)
    ..setUseWideViewPort(true);

iOS端配置 #

iOS的WKWebView需开启内联媒体播放权限，并取消播放手势限制：

_controller.iosSettings
  // 允许内联播放视频
  ..setAllowsInlineMediaPlayback(true)
  // 取消媒体播放的用户手势要求
  ..setMediaTypesRequiringUserActionForPlayback(WKAudiovisualMediaTypes.none);

二、注入JavaScript主动生成缩略图 #

部分网站的<video>标签未设置poster属性，WebView不会自动提取视频帧作为缩略图，可通过JS遍历视频元素，手动生成第一帧作为缩略图：

@override
void initState() {
  super.initState();
  _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(NavigationDelegate(
      onPageFinished: (url) {
        // 页面加载完成后执行JS生成缩略图
        _controller.runJavaScript('''
          document.querySelectorAll('video').forEach(video => {
            // 仅当video未设置poster且已加载视频尺寸时处理
            if (!video.poster && video.videoWidth > 0) {
              const canvas = document.createElement('canvas');
              canvas.width = video.videoWidth;
              canvas.height = video.videoHeight;
              const ctx = canvas.getContext('2d');
              // 绘制视频第一帧
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
              // 将Canvas转为DataURL作为poster
              video.poster = canvas.toDataURL('image/png');
            }
          });
        ''');
      },
    ))
    ..loadRequest(Uri.parse('https://www.w3schools.com/html/html5_video.asp'));
}

三、检查视频源服务器支持 #

部分服务器未开启HTTP Range请求支持，WebView无法请求视频片段生成缩略图。若你控制视频源服务器，需确保服务器响应Range请求，返回指定范围的视频数据。

内容的提问来源于stack exchange，提问作者cyluxx