如何在Flutter中通过永久URL播放YouTube直播流？

你提到的问题非常实际——临时直播视频ID确实会随着直播场次变更而失效，依赖它很容易导致应用崩溃。下面给你两种可靠的实现思路，分别对应无需API和需要API的场景：

方案一：使用iframe + WebView（无需YouTube API） #

这种方法直接利用YouTube的永久直播URL嵌入iframe，通过Flutter的WebView组件加载，不需要额外的API密钥，实现起来快速简单。

实现步骤： #

1. 添加webview_flutter依赖到pubspec.yaml：

dependencies:
  webview_flutter: ^4.4.0 # 请使用最新版本

2. 编写WebView加载iframe的代码，以你的NASA直播URL为例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class YoutubeLiveStream extends StatefulWidget {
  const YoutubeLiveStream({super.key});

  @override
  State<YoutubeLiveStream> createState() => _YoutubeLiveStreamState();
}

class _YoutubeLiveStreamState extends State<YoutubeLiveStream> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    // 加载永久直播的iframe
    final htmlContent = '''
    <html>
      <body style="margin:0;padding:0;">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/live_stream?channel=UCLA_DiR1FfKNvjuUpBHmylQ" 
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen></iframe>
      </body>
    </html>
    ''';

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadHtmlString(htmlContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: controller),
    );
  }
}

注意点： #

• 确保开启JavaScript（JavaScriptMode.unrestricted），否则iframe无法正常加载
• 可以根据需求调整iframe的allow属性，比如添加autoplay实现自动播放（部分平台可能需要用户交互触发）
• 这种方式的播放体验是网页级的，没有原生播放器的流畅度，但胜在无需额外配置

方案二：使用YouTube Data API获取当前直播ID（原生播放器体验） #

如果你想保留youtube_player_flutter的原生播放体验，就需要通过YouTube Data API获取频道当前正在直播的视频ID，再传入控制器。

实现步骤： #

1. 获取API密钥：

   • 登录Google Cloud Console，创建新项目
   • 启用「YouTube Data API v3」
   • 创建API密钥（注意限制密钥的使用范围，避免被滥用）

2. 调用API获取直播ID：
   使用http包发送请求，获取频道的当前直播视频ID。以NASA的频道ID（UCLA_DiR1FfKNvjuUpBHmylQ）为例：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

Future<String?> getCurrentLiveStreamId(String channelId, String apiKey) async {
  final url = Uri.parse(
    'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=$channelId&eventType=live&type=video&key=$apiKey'
  );
  
  final response = await http.get(url);
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    if (data['items'].isNotEmpty) {
      return data['items'][0]['id']['videoId'];
    }
  }
  return null; // 没有正在直播的内容时返回null
}

3. 初始化播放器控制器：

class LivePlayerScreen extends StatefulWidget {
  const LivePlayerScreen({super.key});

  @override
  State<LivePlayerScreen> createState() => _LivePlayerScreenState();
}

class _LivePlayerScreenState extends State<LivePlayerScreen> {
  YoutubePlayerController? _controller;
  bool _isLoading = true;
  final String _channelId = 'UCLA_DiR1FfKNvjuUpBHmylQ';
  final String _apiKey = '你的API密钥'; // 替换成你的API密钥

  @override
  void initState() {
    super.initState();
    _loadLiveStream();
  }

  Future<void> _loadLiveStream() async {
    final liveId = await getCurrentLiveStreamId(_channelId, _apiKey);
    if (liveId != null) {
      setState(() {
        _controller = YoutubePlayerController(
          initialVideoId: liveId,
          params: const YoutubePlayerParams(
            showControls: true,
            showFullscreenButton: true,
            autoPlay: true,
          ),
        );
        _isLoading = false;
      });
    } else {
      setState(() {
        _isLoading = false;
        // 处理没有直播的情况，比如显示提示文本
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }
    return Scaffold(
      body: _controller != null 
          ? YoutubePlayer(controller: _controller!)
          : const Center(child: Text('当前没有直播内容')),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}

注意点： #

• YouTube Data API有免费配额限制（每天10000单位），普通使用完全足够
• 要处理API请求失败、没有直播的情况，避免应用崩溃
• 这种方式能获得原生播放器的体验，支持全屏、控制栏等功能

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