Flutter视频播放插件video_player_android_mux的使用

Flutter视频播放插件video_player_android_mux的使用

该插件是video_player_mux的Android实现。

使用

此包被推荐使用,这意味着你可以像使用video_player_mux一样正常使用它。当你这样做的时候,这个包会自动包含在你的应用中,因此你不需要将其添加到你的pubspec.yaml文件中。

但是,如果你导入这个包以直接使用它的任何API,你应该像往常一样将其添加到你的pubspec.yaml文件中。

以下是一个完整的示例演示如何使用video_player_android_mux插件来播放本地资源和远程视频。

示例代码

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

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

// 定义一个简单的控制器类
class MiniController extends ValueNotifier<VideoPlayerValue> {
  MiniController.network(String url) : super(VideoPlayerValue()) {
    _initialize(url);
  }

  MiniController.asset(String assetName) : super(VideoPlayerValue()) {
    _initialize(assetName);
  }

  Future<void> _initialize(String source) async {
    final VideoPlayerController controller = VideoPlayerController.network(source);
    await controller.initialize();
    value = controller.value;
    controller.addListener(() {
      value = controller.value;
    });
  }

  void play() {
    value.controller?.play();
  }

  void pause() {
    value.controller?.pause();
  }

  void setPlaybackSpeed(double speed) {
    value.controller?.setPlaybackSpeed(speed);
  }

  [@override](/user/override)
  void dispose() {
    value.controller?.dispose();
    super.dispose();
  }
}

class _ControlsOverlay extends StatelessWidget {
  const _ControlsOverlay({required this.controller});

  static const List<double> _examplePlaybackRates = [
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  final MiniController controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 50),
          reverseDuration: const Duration(milliseconds: 200),
          child: controller.value.isInitialized && controller.value.isPlaying
              ? const SizedBox.shrink()
              : Container(
                  color: Colors.black26,
                  child: const Center(
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 100.0,
                      semanticLabel: 'Play',
                    ),
                  ),
                ),
        ),
        GestureDetector(
          onTap: () {
            controller.value.isPlaying ? controller.pause() : controller.play();
          },
        ),
        Align(
          alignment: Alignment.topRight,
          child: PopupMenuButton<double>(
            initialValue: controller.value.playbackSpeed,
            tooltip: 'Playback speed',
            onSelected: (double speed) {
              controller.setPlaybackSpeed(speed);
            },
            itemBuilder: (BuildContext context) {
              return _examplePlaybackRates.map((speed) {
                return PopupMenuItem<double>(
                  value: speed,
                  child: Text('${speed}x'),
                );
              }).toList();
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 12,
                horizontal: 16,
              ),
              child: Text('${controller.value.playbackSpeed}x'),
            ),
          ),
        ),
      ],
    );
  }
}

class _App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        key: const ValueKey<String>('home_page'),
        appBar: AppBar(
          title: const Text('Video player Mux example'),
          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(
                icon: Icon(Icons.cloud),
                text: 'Remote',
              ),
              Tab(icon: Icon(Icons.insert_drive_file), text: 'Asset'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _BumbleBeeRemoteVideo(),
            _ButterFlyAssetVideo(),
          ],
        ),
      ),
    );
  }
}

class _ButterFlyAssetVideo extends StatefulWidget {
  [@override](/user/override)
  _ButterFlyAssetVideoState createState() => _ButterFlyAssetVideoState();
}

class _ButterFlyAssetVideoState extends State<_ButterFlyAssetVideo> {
  late MiniController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = MiniController.asset('assets/Butterfly-209.mp4');

    _controller.addListener(() {
      setState(() {});
    });
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.only(top: 20.0),
          ),
          const Text('With assets mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  VideoPlayer(_controller.controller!),
                  _ControlsOverlay(controller: _controller),
                  VideoProgressIndicator(_controller.controller!),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _BumbleBeeRemoteVideo extends StatefulWidget {
  [@override](/user/override)
  _BumbleBeeRemoteVideoState createState() => _BumbleBeeRemoteVideoState();
}

class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
  late MiniController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = MiniController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    );

    _controller.addListener(() {
      setState(() {});
    });
    _controller.initialize();
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(padding: const EdgeInsets.only(top: 20.0)),
          const Text('With remote mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  VideoPlayer(_controller.controller!),
                  _ControlsOverlay(controller: _controller),
                  VideoProgressIndicator(_controller.controller!),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用video_player_android_mux插件进行视频播放的代码示例。video_player_android_mux是一个用于Flutter的视频播放插件,特别优化了Android平台的视频播放性能,特别是针对多路复用视频流的处理。

首先,确保你已经在pubspec.yaml文件中添加了video_player_android_mux依赖:

dependencies:
  flutter:
    sdk: flutter
  video_player_android_mux: ^x.y.z  # 替换为最新版本号

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

接下来是示例代码,展示如何使用video_player_android_mux播放视频:

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化VideoPlayerController
    _controller = VideoPlayerController.network(
      'https://www.example.com/path/to/your/video.mp4', // 替换为你的视频URL
    )
      ..initialize().then((_) {
        // 确保在视频初始化完成后设置循环播放等属性
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.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: VideoPlayer(_controller),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 控制视频播放
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

在这个示例中:

  1. 初始化VideoPlayerController:在initState方法中,我们创建了一个VideoPlayerController实例并初始化它。这里使用的是网络视频URL,你也可以使用本地文件路径。

  2. 视频播放器UI:在build方法中,我们使用AspectRatio来确保视频播放器保持正确的宽高比,并使用VideoPlayer小部件来显示视频。如果视频尚未初始化,则显示一个CircularProgressIndicator

  3. 播放控制:我们使用一个FloatingActionButton来控制视频的播放和暂停。通过检查_controller.value.isPlaying来确定当前视频状态,并相应地调用play()pause()方法。

  4. 资源清理:在dispose方法中,我们调用_controller.dispose()来释放资源,这是良好的实践,可以防止内存泄漏。

这个示例提供了一个基本的视频播放功能,你可以根据需要进一步扩展,比如添加音量控制、全屏模式、进度条等。

回到顶部