Flutter视频播放控制插件video_player_control_panel的使用

插件概述

video_player_control_panel 是一个用于Flutter应用的插件，它提供了一个可覆盖在 VideoPlayer 之上的控制面板。用户可以通过这个面板执行播放/暂停、快进/快退、设置音量等操作。该插件还支持字幕（包括闭路字幕）和全屏模式。

平台支持

• Windows：通过插件 video_player_win 实现播放功能。
• Android / iOS / Web：通过官方的 video_player 包实现播放功能。

注意事项

对于Windows平台，需要确保支持的媒体格式。详情请参考 video_player_win。

快速开始

安装

在你的项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  video_player_control_panel: ^1.1.0

或者从GitHub仓库直接引用最新代码：

dependencies:
  video_player_control_panel:
    git:
      url: https://github.com/jakky1/video_player_control_panel.git
      ref: master

初始化与注册玩家

在启动媒体播放之前，请确保已添加以下代码以注册Windows平台的播放器：

import 'package:video_player_win/video_player_win_plugin.dart';

if (!kIsWeb && Platform.isWindows) WindowsVideoPlayer.registerWith();

播放视频/音频

从网络资源播放

var controller = VideoPlayerController.network("https://www.your-web.com/sample.mp4");
controller.initialize().then((value) {
  if (controller.value.isInitialized) {
    controller.play();
  } else {
    log("video file load failed");
  }
}).catchError((e) {
  log("controller.initialize() error occurs: $e");
});

从文件播放

var controller = VideoPlayerController.file(File("E:\\test.mp4"));

加载字幕

String content = _getYourSubtitleContent();
var file = SubRipCaptionFile(content); // 如果是.srt文件
// 或者
var file = WebVTTCaptionFile(content); // 如果是.vtt文件
controller.setClosedCaptionFile(Future.value(file));

构建带有控制面板的显示组件

如果要播放的是视频，则需要构建一个包含控制面板的显示组件来展示视频帧：

Widget build(BuildContext context) {
  return JkVideoControlPanel(controller,
    showClosedCaptionButton: true,
    showFullscreenButton: true,
    showVolumeButton: true,

    onPrevClicked: (nowPlayIndex <= 0) ? null : () {
      playPrevVideo();
    },

    onNextClicked: (nowPlayIndex >= g_playlist.length - 1) ? null : () {
      playNextVideo();
    },

    onPlayEnded: () {
      playNextVideo();
    },
  );
}

示例Demo

下面是一个完整的示例demo，展示了如何使用 video_player_control_panel 插件创建一个简单的视频播放器应用，包括基本的播放控制和字幕支持。

import 'dart:io';
import 'dart:developer';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:video_player_control_panel/video_player_control_panel.dart';
import 'package:video_player/video_player.dart';
import 'package:video_player_win/video_player_win_plugin.dart';
import 'package:sprintf/sprintf.dart';

void main() {
  if (!kIsWeb && Platform.isWindows) WindowsVideoPlayer.registerWith();
  runApp(const MyApp());
}

String generateCaptionFileContent() {
  final sb = StringBuffer();
  for (int i = 1; i < 60 * 20; i++) {
    int minute = i ~/ 60;
    int second = i % 60;
    sb.writeln("$i");
    sb.writeln(sprintf("00:%02d:%02d,000 --> 00:%02d:%02d,900", [minute, second, minute, second]));
    sb.writeln("this is caption $i");
    sb.writeln("2nd line");
    sb.writeln("");
  }
  return sb.toString();
}

final g_playlist = [
  "E:/test_youtube.mp4",
  "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4",
  "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_10MB_MOV.mov",
];

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  VideoPlayerController? controller;
  int nowPlayIndex = 0;

  void playPrevVideo() {
    if (nowPlayIndex <= 0) return;
    playVideo(--nowPlayIndex);
  }

  void playNextVideo() {
    if (nowPlayIndex >= g_playlist.length - 1) return;
    playVideo(++nowPlayIndex);
  }

  void playVideo(int index) {
    controller?.dispose();

    var path = g_playlist[index];
    controller = VideoPlayerController.network(path);

    var captionFile = Future.value(SubRipCaptionFile(generateCaptionFileContent()));
    controller!.setClosedCaptionFile(captionFile);

    setState(() {});
    controller!.initialize().then((value) {
      if (!controller!.value.isInitialized) {
        log("controller.initialize() failed");
        return;
      }

      controller!.play(); // NOTE: web not allowed auto play without user interaction
    }).catchError((e) {
      log("controller.initialize() error occurs: $e");
    });
  }

  @override
  void initState() {
    super.initState();
    playVideo(0);
  }

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

  @override
  Widget build(BuildContext context) {
    Widget player = JkVideoControlPanel(controller!,
      showClosedCaptionButton: true,
      showFullscreenButton: true,
      showVolumeButton: true,
      bgColor: Colors.black,
      onPrevClicked: (nowPlayIndex <= 0) ? null : () {
        playPrevVideo();
      },
      onNextClicked: (nowPlayIndex >= g_playlist.length - 1) ? null : () {
        playNextVideo();
      },
      onPlayEnded: () {
        playNextVideo();
      },
    );

    Widget player2 = JkVideoPlaylistPlayer(
      playlist: g_playlist,
      isLooping: true,
      autoplay: true,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Example app'),
        ),
        body: Row(children: [
          Expanded(child: player),
          //Expanded(child: player2),  // 解除注释此行以显示两个视频
        ]),
      ),
    );
  }
}

以上就是关于 video_player_control_panel 插件的基本介绍及其使用方法。希望这些信息能帮助你快速上手并集成到自己的项目中。如果你有任何问题或需要进一步的帮助，请随时提问！