如何在Flutter Web及多平台（Web、Windows）嵌入YouTube视频链接

以下几个库可以直接支持https://www.youtube.com/watch?v=2Vv-BfVoq4g这类标准YouTube视频链接，无需转成MP4源：

• youtube_player_flutter
  这是最常用的YouTube播放库之一，直接支持视频ID或完整watch链接。示例代码：

  YoutubePlayer(
    controller: YoutubePlayerController(
      initialVideoId: '2Vv-BfVoq4g', // 从watch链接提取ID，也可直接传入完整链接初始化
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
      ),
    ),
    showVideoProgressIndicator: true,
  )
  

  记得在pubspec.yaml中添加对应依赖，选择最新稳定版本即可。

• flutter_youtube
  轻量级库，需配合YouTube Data API密钥使用，直接传入完整watch链接就能播放：

  FlutterYoutube.playYoutubeVideoByUrl(
    apiKey: '你的Google开发者平台API密钥',
    videoUrl: 'https://www.youtube.com/watch?v=2Vv-BfVoq4g',
    autoPlay: false,
  );
  

  API密钥需要去Google开发者后台申请，步骤简单，这个库的多平台适配性不错。

• webview_flutter
  如果上述库都不符合需求，用WebView直接嵌入YouTube播放页是兜底方案，完全兼容原生链接：

  WebView(
    initialUrl: 'https://www.youtube.com/embed/2Vv-BfVoq4g', // 把watch替换成embed更适合嵌入，直接用watch链接也能加载
    javascriptMode: JavascriptMode.unrestricted,
  );
  

  注意要配置WebView的相关权限，比如Android的网络权限、iOS的App Transport Security设置。

另外，你提到的youtube_player_iframe其实也支持原生YouTube链接，可能是之前用法有误。正确的初始化方式可以直接加载视频ID或链接：

final controller = YoutubePlayerController(
  initialVideoId: '2Vv-BfVoq4g',
  params: const YoutubePlayerParams(
    autoPlay: false,
  ),
);

YoutubePlayerIFrame(controller: controller)

如果之前用了MP4链接的方式，换成这种基于视频ID的初始化就能正常加载YouTube原生链接了。

内容的提问来源于stack exchange，提问作者Huy Trần Văn