Flutter视频播放插件vk_video的使用

插件介绍

vk_video插件简化了将VK视频播放集成到您的Flutter应用程序中。它支持VK Video API，允许轻松嵌入和控制视频，为用户提供无缝的媒体体验。

开始使用

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  vk_video: ^1.0.3

或者运行命令：

flutter pub add vk_video

使用播放器

导入包

import 'package:vk_video/vk_video.dart';

禁用全屏模式

VKVideo(
    videoOId: '-22822305',
    videoId: '456241864',
),

启用全屏模式

VKVideo(
    videoOId: '-213200306',
    videoId: '456239020',
    isIframeAllowFullscreen: true,
    isAllowsInlineMediaPlayback: false,
),

Android权限配置

为了确保Android应用能够访问互联网，请在AndroidManifest.xml文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

使用控制器

初始化控制器

VKVideoController? _controller;

@override
void initState() {
    _controller = VKVideoController();
    super.initState();
}

使用控制器

VKVideo(
    controller: _controller,
    videoOId: '-213200306',
    videoId: '456239020',
    isAutoPlay: true,
    videoResolutionEnum: VideoResolutionEnum.p480,
    videoStartTime: Duration(seconds: 3),
    backgroundColor: const Color(0xFF000000),
    initialWidget: Text(
        "Loading....",
        style: TextStyle(
          color: Color(0xFFFFFFFF),
        ),
    ),
),

添加监听器

_controller?.addListener(() {
    debugPrint("position: ${_controller!.getCurrentTime}");
    debugPrint("currentTime: $currentTime");
    debugPrint("isMute: $isMute");
    debugPrint("duration: ${_controller?.getDuration}");
    debugPrint("volume: ${_controller?.getVolume}");
    debugPrint("quality: ${_controller?.getQuality}");
    debugPrint("player state: ${_controller?.getPlayerState}");
});

求进度条前进5秒

_controller?.onSeekTo(Duration(seconds: _controller!.getCurrentTime!) + Duration(seconds: 5));

示例代码

以下是完整的示例代码，展示了如何在Flutter项目中使用vk_video插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'vk_video Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  VKVideoController? _controller;

  int currentTime = 0;
  bool isMute = false;

  @override
  void initState() {
    _controller = VKVideoController();
    super.initState();
    _controller?.addListener(_videoListener);
  }

  _videoListener() async {
    debugPrint("position: ${_controller!.getCurrentTime}");
    debugPrint("currentTime: $currentTime");
    debugPrint("isMute: $isMute");
    debugPrint("duration: ${_controller?.getDuration}");
    debugPrint("volume: ${_controller?.getVolume}");
    debugPrint("quality: ${_controller?.getQuality}");
    debugPrint("player state: ${_controller?.getPlayerState}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            VKVideo(
              controller: _controller,
              videoOId: '-213200306',
              videoId: '456239020',
              isAutoPlay: true,
              videoResolutionEnum: VideoResolutionEnum.p480,
              videoStartTime: Duration(seconds: 3),
              backgroundColor: const Color(0xFF000000),
              initialWidget: Text(
                "Loading....",
                style: TextStyle(
                  color: Color(0xFFFFFFFF),
                ),
              ),
            ),
            SizedBox(
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {
                      _controller?.onPlay();
                    },
                    child: Icon(Icons.play_arrow, size: 35),
                  ),
                  TextButton(
                    onPressed: () {
                      _controller?.onPause();
                    },
                    child: Icon(Icons.pause_outlined, size: 35),
                  ),
                  TextButton(
                    onPressed: () {
                      _controller?.onSeekTo(
                          Duration(seconds: _controller!.getCurrentTime!) -
                              Duration(seconds: 5));
                    },
                    child: Icon(Icons.skip_previous, size: 35),
                  ),
                  TextButton(
                    onPressed: () {
                      _controller?.onSeekTo(
                          Duration(seconds: _controller!.getCurrentTime!) +
                              Duration(seconds: 5));
                    },
                    child: Icon(Icons.skip_next, size: 35),
                  ),
                  TextButton(
                    onPressed: () {
                      _controller?.onUnMute();
                    },
                    child: Icon(Icons.volume_up, size: 35),
                  ),
                  TextButton(
                    onPressed: () {
                      _controller?.onMute();
                    },
                    child: Icon(Icons.volume_off, size: 35),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

希望这个详细的指南能帮助您更好地理解和使用vk_video插件！如果您有任何问题或需要进一步的帮助，请随时联系我。