Flutter BetterPlayer 获取纵横比 - JavaScript

BetterPlayer 是一种 Flutter 插件，旨在使 Flutter 应用程序中的视频媒体播放更加容易。

这篇文章将向您展示如何使用 BetterPlayer 在应用程序中获取视频的纵横比。我们将使用 JavaScript 编写这段代码。

获取视频纵横比

获取视频纵横比是相对简单的。我们可以使用 BetterPlayerController 对象的 videoPlayerController.value.aspectRatio 属性来获取它。下面是代码片段:

BetterPlayerController _betterPlayerController;

AspectRatio(
    aspectRatio: _betterPlayerController
        .videoPlayerController.value.aspectRatio,
    child: BetterPlayer(
      controller: _betterPlayerController,
    ),
),

完整的 Widget 代码

下面是包含 BetterPlayer 控件，以及获取纵横比 Widget 代码的完整示例。

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

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

  @override
  _CustomVideoPlayerState createState() => _CustomVideoPlayerState();
}

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  BetterPlayerController _betterPlayerController;

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

    _betterPlayerController = BetterPlayerController(
      BetterPlayerConfiguration(
        aspectRatio: 16 / 9,
        autoPlay: true,
        looping: true,
        fit: BoxFit.contain,
      ),
      betterPlayerDataSource:
          BetterPlayerDataSource(networkUrl: 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: _betterPlayerController
              .videoPlayerController.value.aspectRatio,
          child: BetterPlayer(
            controller: _betterPlayerController,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Aspect ratio:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              _betterPlayerController
                  .videoPlayerController.value.aspectRatio
                  .toStringAsFixed(2),
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ],
    );
  }

  @override
  void dispose() {
    _betterPlayerController.dispose();
    super.dispose();
  }
}

结论

如果您使用 Flutter 开发视频播放应用程序，并希望使用便捷的方式获取视频的纵横比，BetterPlayer 是不错的选择。感谢您的阅读！