Flutter视频播放插件player_sdk的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter视频播放插件player_sdk的使用

player_sdk 是一个支持在多种媒体格式下播放和流式传输视频的 Flutter 插件。

特性

  • 可信播放器
  • 支持 FLV、DASH、HLS、MP3、MP4
  • 支持直播和点播
  • 播放、暂停、拖动、平滑更改质量(流式传输 HLS、DASH)
  • 静音、取消静音、更改音频音量
  • 获取播放器事件、时长

支持平台

  • Android
  • iOS

要求

对于 iOS:
  • 环境:
    • iOS 12.0+
    • XCode 10.3+
    • Cocoapods

设置

首先,你需要在 build.gradle 文件(对于 Android)或 Info.plist 文件(对于 iOS)中设置有效的 appKeysecretKeyplayerId,这些对应你的 applicationIdBundle Identifier 来初始化播放器。

注意: 对于 iOS,你需要在 Info.plist 文件中声明 appKeysecretKeyplayerId:

<key>appkey</key>
<string>YOUR_APPKEY</string>
<key>playerid</key>
<string>YOUR_PLAYER_ID</string>
<key>secretkey</key>
<string>YOUR_SECRET_KEY</string>

实现 OnConfigListener 接口以监听来自 SDK 的认证过程响应,然后调用 getInitializeSDKState 函数:

final player_sdk = PlayerSdk();
player_sdk.getInitializeSDKState(appKey, secretKey, playerId, onConfigListener);

确保监听来自 OnConfigListener 接口的所有回调。

  • 如果初始化失败,你可以记录错误信息,处理并重试。
  • 如果初始化成功,你现在可以使用我们的播放器播放你的源视频。

实现 onPrepareonInitFailedonInitializingonInitSuccessfully 方法来处理初始化状态。

void onPrepare();

void onInitFailed(String errorType, String message);

void onInitializing();

void onInitSuccessfully();

成功初始化播放器后,创建 PlayerController 实例来设置播放器配置,并创建 NativePlayerView 实例来设置播放器视图。实现 OnPlayerListenerOnPreparePlayer 接口以监听来自 SDK 的事件。例如:

// 设置播放器
final playerController = PlayerController();

playerController.createNewInstancePlayer(onPreparePlayer);
playerController.enableLiveOffControl(true);
playerController.setTimeOffsetAdvertDefault(10);
playerController.setOnPlayerListener(onPlayerListener);
playerController.setOnPreparePlayer(onPreparePlayer);
playerController.setStartAutoPlay(true);
// 设置播放器视图
final nativePlayerView = NativePlayerView();

// 创建一个可以包含播放器视图的小部件,然后调用:
NativePlayerView(
    onViewCreated: (viewId) async {
        await playerController.setPlayerView(viewId);
    }
)

配置和播放视频

播放视频源

当播放器验证和播放器视图设置完成后,准备一个支持的视频源(字符串类型),然后调用以下命令行开始播放视频:

try {
    playerController.setStartAutoPlay(true);
    await playerController.setSourceVideo(currentSource);
    playerController.build();
} catch (e, stackTrace) {
    // 处理异常
}

你可以使用 try/catch 块来捕获可能导致应用崩溃的异常。

控制播放器

以下是控制播放器的函数列表:

序号 描述 函数 返回值
1 暂停视频 playerController.pauseVideo(); void
2 恢复视频 playerController.resumeVideo(); void
3 静音视频 playerController.muteVideo(); void
4 取消静音视频 playerController.unMuteVideo(); void
5 获取视频时长 playerController.getVideoDuration(); int
6 检查是否正在播放 playerController.isPlaying(); bool
7 获取所有视频质量 playerController.getAllQualityVideo(); List<String>
8 应用选定的质量 playerController.applySelectedQualityVideo(String) void
9 设置视频音量 playerController.setVideoVolume(double audioVol); void
10 拖动视频 playerController.seekTo(int pos); void
处理事件

当播放器创建、暂停、停止、更改配置或质量时,播放器 SDK 会立即推送状态和变化。因此,实现兼容接口以捕获并处理事件。

@Override
public void onLogEventListener(String event) {
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            // 处理事件
            addLogText("LOG EVENT: : " + event.toString());
        }
    });
}

示例代码

import 'package:flutter/material.dart';
import 'package:player_sdk_example/my_home_page.dart';

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

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

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

更多关于Flutter视频播放插件player_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频播放插件player_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用player_sdk插件进行视频播放的示例代码。需要注意的是,由于player_sdk并不是Flutter官方或广泛认可的插件名称,这里假设你指的是一个通用的视频播放器插件,比如chewievideo_player。在实际项目中,你需要确保使用正确的插件名称和版本。

下面以video_playerchewie为例,展示如何在Flutter中实现视频播放。video_player负责底层的视频播放功能,而chewie提供了一个用户友好的视频播放器界面。

首先,在pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.19  # 请检查最新版本号
  chewie: ^1.2.2  # 请检查最新版本号

然后,运行flutter pub get来安装这些依赖。

接下来,在你的Dart文件中实现视频播放功能。以下是一个完整的示例:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';
import 'package:provider/provider.dart';

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

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

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    _controller = VideoPlayerController.network(
      'https://www.example.com/path/to/your/video.mp4',
    )
      ..initialize().then((_) {
        // 确保视频初始化完成后设置Chewie控制器
        setState(() {});
      });

    // 创建Chewie控制器
    _chewieController = ChewieController(
      videoPlayerController: _controller,
      aspectRatio: _controller.value.aspectRatio,
      autoPlay: false,
      looping: false,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player Demo'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: Chewie(
                  controller: _chewieController,
                ),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. pubspec.yaml文件中添加了video_playerchewie依赖。
  2. VideoPlayerScreen中初始化了VideoPlayerControllerChewieController
  3. 使用Chewie组件来显示视频播放器界面。
  4. 添加了一个浮动操作按钮来控制视频的播放和暂停。

请确保将视频URL替换为你自己的视频链接,并根据需要调整其他参数。这个示例应该能帮助你在Flutter项目中集成视频播放功能。

回到顶部