Flutter视频播放插件universal_videoplayer的使用

Flutter视频播放插件universal_videoplayer的使用

我们已经实现了一个跨平台视频播放器，提供了流畅的视频播放体验。

功能支持

视频播放器控件

移动端控件

• 水平滑动以在视频中向前或向后快进。 (seekSwipes)
• 右侧屏幕垂直滑动以控制视频音量。 (volumeSwipes)
• 左侧屏幕垂直滑动以控制视频亮度。 (brightnessSwipes)
• 双击屏幕两侧以在视频中向前或向后快进。 (doubleTapToSeek)
• 长按屏幕以加速视频，长按释放时减速。 (onLongPressSpeedUp)

桌面端控件

• 单击鼠标以切换播放和暂停。 (desktopTapToPlayAndPause)
• 双击鼠标以切换全屏模式。 (desktopDoubleTapToFullScreen)
• 使用键盘上下箭头增加或减少视频音量。 (volumeArrows)
• 使用键盘左右箭头在视频中向前或向后快进。 (seekArrows)
• 按下Esc键关闭全屏模式。 (escapeKeyCloseFullScreen)
• 按下数字小键盘小数点键（.）以切换视频适应模式。 (numPadDecimalKeyToggleFit)
• 按下Enter键打开全屏模式。 (enterKeyOpensFullScreen)
• 按下空格键切换播放和暂停视频。 (spaceKeyTogglePlay)

初始化

void main() {
  initMeeduPlayer(
    androidUseFVP: true,
    iosUseFVP: false,
  );
  runApp(const MyApp());
}

Android 和 iOS 替换原生视频播放器

Android

• 添加此包并设置 androidUseFVP 为 true 在 initMeeduPlayer 中。

iOS

• 添加此包并在 initMeeduPlayer 中设置 iosUseFVP 为 true。

HLS 在 Web 上

在 pubspec.yaml 中添加：

  video_player_web_hls: ^1.0.0+3

在 index.html 文件中添加以下脚本：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest" type="application/javascript"></script>

放在 <script src="main.dart.js" type="application/javascript"></script> 或 <script src="flutter.js" defer></script> 之前。

示例代码

以下是完整的示例代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:universal_videoplayer/meedu_player.dart';
import 'package:universal_videoplayer_example/pages/basic_example_page.dart';
import 'package:universal_videoplayer_example/pages/fullscreen_example_page.dart';
import 'package:logging/logging.dart';

void main() {
  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((record) {
    print(
        '${record.loggerName}.${record.level.name}: ${record.time}: ${record.message}');
  });
  initMeeduPlayer(
    androidUseFVP: true,
    iosUseFVP: false,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      routes: {
        "basic": (_) => const BasicExamplePage(),
        "fullscreen": (_) => const FullscreenExamplePage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                  child: Text(
                    '基本示例',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Wrap(
                  children: [
                    buildButton(
                      context,
                      text: '基本网络示例',
                      routeName: 'basic',
                      description: '加载网络视频示例。',
                    ),
                    buildButton(
                      context,
                      text: '全屏示例',
                      routeName: 'fullscreen',
                      description: '启用全屏模式示例。',
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildButton(BuildContext context,
      {required String text,
      required String description,
      required String routeName}) {
    return Card(
      elevation: 30,
      margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: InkWell(
        onTap: () {
          Navigator.pushNamed(context, routeName);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(text, style: const TextStyle(fontSize: 18.0)),
              const SizedBox(height: 8.0),
              Text(description, style: const TextStyle(fontSize: 14.0)),
            ],
          ),
        ),
      ),
    );
  }
}