Flutter视频播放插件jw_video_player的使用

Flutter视频播放插件jw_video_player的使用

注意：目前处于测试阶段

包版本：

• 0.0.2

描述：

使用此包可以将本地视频播放器嵌入到iOS、Android和Web应用中。

该包中的接口包括：

• JWVideoPlayer：视频播放器小部件
• JWPlayerController：用于播放、暂停、停止等操作的控制器，并监听播放器值的变化。
• JWPlayerConfiguration：配置播放器的参数。

示例

查看示例以了解库的实现方式。

使用方法

// 如果你正在使用移动设备，
// 需要在应用中设置你的许可证。
void main() async {
  JWVideoPlayer.setLicenseKey({JW_LICENSE});
  runApp(const App());
}

class App extends StatelessWidget {
  JWPlayerConfiguration config1 = JWPlayerConfiguration(
    file: "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8"
  );

  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Title',
      home: PlayerApp(),
    );
  }
}

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

  @override
  State<PlayerApp> createState() => _PlayerAppState();
}

class _PlayerAppState extends State<PlayerApp> {
  String _platformVersion = 'Unknown';
  final JWPlayerController _controller = JWPlayerController();

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中进行初始化。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch来处理PlatformException。
    // 我们还处理消息可能返回null的情况。
    try {
      JWVideoPlayer.setLicenseKey(GetLicense.getLicense());
    } catch (e) {
      debugPrint(e.toString());
    }
    try {
      platformVersion = await JWVideoPlayer.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    // 如果在异步平台消息还在飞行时，小部件从树中移除，我们希望丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Player version: $_platformVersion'),
        ),
        body: Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            ConstrainedBox(
              // 如果应用的宽高比为W:h，则限制宽度为70%，如果w:H则使用整个宽度。
              constraints: BoxConstraints(maxWidth: height > width ? width : width * 0.7),
              child: AspectRatio(
                aspectRatio: 2.1,
                child: JWVideoPlayer(
                  config: config1,
                  controller: _controller,
                ),
              ),
            ),
            PlayerStatusView(controller: _controller),
          ],
        ),
        bottomNavigationBar: Padding(
          padding: const EdgeInsets.only(bottom: 15),
          child: ButtonBar(
            alignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(onPressed: _controller.play, icon: const Icon(Icons.play_arrow)),
              IconButton(onPressed: _controller.pause, icon: const Icon(Icons.pause)),
              IconButton(onPressed: _controller.stop, icon: const Icon(Icons.stop))
            ],
          ),
        ),
      ),
    );
  }
}

class PlayerStatusView extends StatelessWidget {
  const PlayerStatusView({
    Key? key,
    required JWPlayerController controller,
  })  : _controller = controller,
        super(key: key);

  final JWPlayerController _controller;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: _controller,
      builder: ((context, JWVideoPlayerValue value, child) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                "Player Controller Status",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text("position: ${value.position.toString()}"),
              const Padding(padding: EdgeInsets.all(2)),
              Text("duration: ${value.duration.toString()}"),
              const Padding(padding: EdgeInsets.all(2)),
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text("buffered: "),
                  CircularProgressIndicator(
                    value: (value.bufferPercentage / 100),
                    backgroundColor: Colors.transparent,
                    valueColor: const AlwaysStoppedAnimation<Color>(Colors.grey),
                  ),
                  const Padding(padding: EdgeInsets.all(2)),
                  const Text("state: "),
                  Icon(value.state == PlayerState.playing
                      ? Icons.play_circle
                      : Icons.pause_circle)
                ],
              ),
            ],
          )),
    );
  }
}

Web端需求

在Dart端与上述相同，但不需要许可证，但需要添加播放器脚本，你可以从你的JWPlayer仪表板或使用JWPlayer管理API获取它。

<!DOCTYPE html>
<html>
<head>
  ...
  <!-- 在这里设置你的JWPlayer脚本 -->
  <!-- 这应该来自JW仪表板或请求更多信息在这里 https://docs.jwplayer.com/platform/docs/players-get-started -->
  <script src="https://cdn.jwplayer.com/libraries/{PLAYER_ID}.js"></script>
  ...
</head>
<body>
  ...
</body>
</html>