Flutter视频播放插件splayer的使用

Flutter视频播放插件splayer的使用

描述

splayer 是一个用于 Flutter Web 和移动设备的视频播放器插件。它支持从 YouTube 和 Vimeo 播放视频。

splayer 是一个简单且易于使用的视频播放器，其视频控制界面类似于 YouTube 播放器（可自定义控件），并且可以从 YouTube 和 Vimeo 播放视频（通过提供 URL 或视频 ID）。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 splayer 插件。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是您的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // 这是您的应用程序的主题。
        //
        // 尝试这样做：运行您的应用程序并查看它有一个紫色的工具栏。然后，在不退出应用程序的情况下，
        // 将颜色方案中的 seedColor 改为 Colors.green 并调用“热重载”（保存更改或按“热重载”按钮）。
        //
        // 注意计数器没有重置回零；应用程序状态在重新加载期间不会丢失。要重置状态，请使用热重启。
        //
        // 这也适用于代码，而不仅仅是值：大多数代码更改可以通过简单的热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是您的应用的主页。它是有状态的，这意味着
  // 它有一个状态对象（定义在下面），该状态对象包含影响外观的字段。
  //
  // 这个类是状态的配置。它保存由父级（在这种情况下是 App 小部件）提供的值（在这种情况下是标题）
  // 并被状态的小部件构建方法使用。小部件子类中的字段总是标记为“final”。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PodPlayerController controller;

  @override
  void initState() {
    controller = PodPlayerController(
        podPlayerConfig: const PodPlayerConfig(
          isLive: false,
          autoPlay: false,
          videoQualityPriority: [1080, 720, 480, 360, 240],
          tap: true,
        ),
        playVideoFrom: PlayVideoFrom.youtube("https://www.youtube.com/watch?v=LKNHVDPKy7g", live: false))
      ..initialise();
    controller.pause();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(
              height: 250,
              child: PodVideoPlayer(controller: controller, isLive: true),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

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

2. 主函数：

   void main() {
     runApp(const MyApp());
   }
   

3. 创建应用的基本结构：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 创建主页：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 实现主页的状态管理：

   class _MyHomePageState extends State<MyHomePage> {
     late PodPlayerController controller;
   
     @override
     void initState() {
       controller = PodPlayerController(
           podPlayerConfig: const PodPlayerConfig(
             isLive: false,
             autoPlay: false,
             videoQualityPriority: [1080, 720, 480, 360, 240],
             tap: true,
           ),
           playVideoFrom: PlayVideoFrom.youtube("https://www.youtube.com/watch?v=LKNHVDPKy7g", live: false))
         ..initialise();
       controller.pause();
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: SafeArea(
           child: Column(
             children: [
               SizedBox(
                 height: 250,
                 child: PodVideoPlayer(controller: controller, isLive: true),
               ),
             ],
           ),
         ),
       );
     }
   }