Flutter YouTube Shorts视频播放插件 youtube_shorts 的使用

概述

youtube_shorts 是一个用于在Flutter应用中展示YouTube Shorts的插件。该插件利用了youtube_explode_dart来获取YouTube视频信息，并使用media_kit作为视频播放器。

目录

• 配置和原生权限
• 基本用法
  • 通过列表URL显示Shorts
  • 通过频道名称显示Shorts
  • 通过多个频道名称显示Shorts
  • 最简页面示例
• 视频操作
• 播放器操作

配置和原生权限

由于该插件使用media_kit作为视频播放引擎，因此需要进行一些原生配置。请参考media_kit的文档完成相应平台的配置。

此外，在main()函数中调用MediaKit.ensureInitialized();初始化媒体工具包。

import 'package:permission_handler/permission_handler.dart';
import 'package:system_info/system_info.dart';

if (/* Android 13 or higher */) {
  if (await Permission.videos.isDenied || await Permission.videos.isPermanentlyDenied) {
    final state = await Permission.videos.request();
    if (!state.isGranted) {
      await SystemNavigator.pop();
    }
  }
  if (await Permission.audio.isDenied || await Permission.audio.isPermanentlyDenied) {
    final state = await Permission.audio.request();
    if (!state.isGranted) {
      await SystemNavigator.pop();
    }
  }
} else {
  if (await Permission.storage.isDenied || await Permission.storage.isPermanentlyDenied) {
    final state = await Permission.storage.request();
    if (!state.isGranted) {
      await SystemNavigator.pop();
    }
  }
}

基本用法

首先，您需要创建一个VideosSourceController来控制所有视频源。有两种构造方法：从URL列表或频道名称。

通过列表URL显示Shorts

late final ShortsController controller;

@override
void initState() {
  super.initState();
  controller = ShortsController(
    youtubeVideoInfoService: VideosSourceController.fromUrlList(
      videoIds: [
        'https://www.youtube.com/shorts/PiWJWfzVwjU',
        'https://www.youtube.com/shorts/AeZ3dmC676c',
        'https://www.youtube.com/shorts/L1lg_lxUxfw',
        'https://www.youtube.com/shorts/OWPsdhLHK7c',
      ],
    ),
  );
}

通过频道名称显示Shorts

注意：频道名称不是以@开头的名字，而是类似/user/[channelName]中的名字。

late final ShortsController controller;

@override
void initState() {
  super.initState();
  controller = ShortsController(
    youtubeVideoInfoService: VideosSourceController.fromYoutubeChannel(
      channelName: 'fcbarcelona',
    ),
  );
}

通过多个频道名称显示Shorts

late final ShortsController controller;

@override
void initState() {
  super.initState();
  controller = ShortsController(
    youtubeVideoSourceController: VideosSourceController.fromMultiYoutubeChannels(
      channelsName: ['fcbarcelona', 'realmadridcf', 'atleticodemadrid'],
    ),
  );
}

最简页面示例

@override
Widget build(BuildContext context) {
  return YoutubeShortsPage(
    controller: controller,
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

完整Demo示例

以下是一个完整的示例，展示了如何从不同来源加载YouTube Shorts并在Flutter应用中展示：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MediaKit.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YouTube Shorts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SelectionPage(),
    );
  }
}

class SelectionPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Select Source')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (_) => ShortsByUrls()));
              },
              child: Text('By URLs'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (_) => ShortsByChannel()));
              },
              child: Text('By Channel Name'),
            ),
          ],
        ),
      ),
    );
  }
}

class ShortsByUrls extends StatefulWidget {
  @override
  _ShortsByUrlsState createState() => _ShortsByUrlsState();
}

class _ShortsByUrlsState extends State<ShortsByUrls> {
  late ShortsController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ShortsController(
      youtubeVideoInfoService: VideosSourceController.fromUrlList(
        videoIds: [
          'https://www.youtube.com/shorts/PiWJWfzVwjU',
          'https://www.youtube.com/shorts/AeZ3dmC676c',
        ],
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return YoutubeShortsPage(controller: _controller);
  }
}

class ShortsByChannel extends StatefulWidget {
  @override
  _ShortsByChannelState createState() => _ShortsByChannelState();
}

class _ShortsByChannelState extends State<ShortsByChannel> {
  late ShortsController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ShortsController(
      youtubeVideoInfoService: VideosSourceController.fromYoutubeChannel(channelName: 'fcbarcelona'),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return YoutubeShortsPage(controller: _controller);
  }
}

这个示例展示了如何从不同的来源（如URL列表或频道名称）加载并展示YouTube Shorts。希望这对您的开发有所帮助！