如何在Flutter Web端实现HLS/DASH格式视频播放？

你遇到的MEDIA_ERR_SRC_NOT_SUPPORTED错误本质是：Chrome、Edge、Firefox等主流桌面浏览器原生不支持HLS（.m3u8）格式解码，video_player插件的默认web端实现直接调用浏览器原生video标签能力，因此无法识别你的视频源，Android端能正常播是因为原生Android端的video_player实现内置了HLS解码支持。

• 方案1：新增HLS播放支持（无需修改原有业务逻辑）

  1. 在pubspec.yaml的dependencies节点下添加web端HLS扩展依赖：

  video_player_web_hls: ^1.0.0+2
  

  2. 在项目入口main.dart中注册该扩展实现：

  import 'package:flutter/foundation.dart';
  import 'package:video_player_web_hls/video_player_web_hls.dart';
  
  void main() {
    if (kIsWeb) {
      HlsVideoPlayerWeb.registerWith();
    }
    runApp(const MyApp());
  }
  

  完成以上两步后原有代码无需改动，即可在web端正常播放HLS视频。

• 方案2：无额外依赖兼容方案
  将视频源转码为H.264编码的MP4格式，初始化时将formatHint参数改为VideoFormat.mp4即可，该格式为所有浏览器原生支持，不需要额外配置。

• 必做校验项：配置资源跨域
  web端所有资源请求都受浏览器同源策略限制，你需要在视频资源所在的服务器响应头中添加Access-Control-Allow-Origin配置，允许你的前端站点域名访问视频资源，否则即使格式支持也会被浏览器拦截。

建议给视频初始化流程添加异常捕获，避免未处理异常导致页面崩溃：

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.network(
    'videourl.m3u8',
    formatHint: VideoFormat.hls,    
  );
  _controller.addListener(() {
    setState(() {});
  });
  _controller.setLooping(false);
  // 加异常捕获
  _controller.initialize().catchError((e) {
    print("视频初始化失败：$e");
    // 自行补充播放失败的业务逻辑，比如弹出失败提示
  });
}

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