Flutter音视频播放插件av_media_player的使用

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

Flutter音视频播放插件av_media_player的使用

关于 av_media_player

av_media_player 是一个轻量级的媒体播放器,支持字幕渲染和音轨选择。它利用系统或应用级别的组件实现无缝播放,并通过 Texture 小部件进行视频渲染。有关API文档,请访问 官方文档

支持的平台及版本

平台 版本 后端技术
iOS 15+ AVPlayer
macOS 12+ AVPlayer
Android 8+ ExoPlayer
Windows 10+ MediaPlayer
Linux N/A libmpv

支持的媒体格式

类型 格式
视频编码 H.264, H.265(HEVC)
音频编码 AAC, MP3
容器格式 MP4, TS
字幕格式 WebVTT
传输协议 HTTP, HLS, LL-HLS

示例代码

以下是一个简单的示例,展示了如何使用 AvMediaView 小部件从URL播放视频。这个例子展示了最基本的用法,更多高级用法请参阅 main_advanced.dart 文件。

import 'package:flutter/material.dart';
import 'package:av_media_player/widget.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _loading = true;

  @override
  Widget build(BuildContext context) => Stack(
        textDirection: TextDirection.ltr,
        alignment: Alignment.center,
        children: [
          AvMediaView(
            initSource:
                'https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8',
            initLooping: true,
            initAutoPlay: true,
            onCreated: (player) => player.loading.addListener(
                () => setState(() => _loading = player.loading.value)),
          ),
          if (_loading) const CircularProgressIndicator(),
        ],
      );
}

在这个示例中:

  • initSource:指定要播放的视频源URL。
  • initLooping:设置是否循环播放。
  • initAutoPlay:设置是否自动播放。
  • onCreated:当播放器创建时触发,监听加载状态并更新UI。

通过这些配置,您可以轻松地在Flutter应用中集成音视频播放功能。如果您需要更复杂的功能,如字幕渲染、音轨选择等,请参考插件的完整文档和示例代码。


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用av_media_player插件来进行音视频播放的一个基本示例。av_media_player是一个功能强大的Flutter插件,用于在Flutter应用中播放音视频。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加av_media_player的依赖:

dependencies:
  flutter:
    sdk: flutter
  av_media_player: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入av_media_player插件:

import 'package:av_media_player/av_media_player.dart';

3. 使用AVMediaPlayer

下面是一个简单的示例,展示如何使用AVMediaPlayer来播放一个视频文件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  AVMediaPlayerController? _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器并设置视频源
    _controller = AVMediaPlayerController.network(
      'https://www.example.com/path/to/your/video.mp4', // 替换为你的视频URL
      autoPlay: true,
      looping: false,
    );

    // 监听视频完成事件
    _controller!.setCompletionHandler(() {
      print('Video playback completed.');
    });

    // 监听播放状态变化事件
    _controller!.addStatusListener((status) {
      print('Player status: $status');
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AV Media Player Example'),
      ),
      body: Center(
        child: _controller!.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller!.value.aspectRatio,
                child: AVMediaPlayer(controller: _controller!),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller!.value.isPlaying) {
              _controller!.pause();
            } else {
              _controller!.play();
            }
          });
        },
        tooltip: 'Play/Pause',
        child: Icon(
          _controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

4. 运行应用

确保你的视频URL是有效的,并且设备或模拟器能够访问该URL。然后运行你的Flutter应用,你应该能够看到视频播放器控件,并能够播放和暂停视频。

注意事项

  • 确保你遵循了av_media_player插件的文档和最佳实践。
  • 根据你的具体需求,你可能需要调整代码,例如处理错误、添加更多的控件或自定义UI。
  • av_media_player插件可能会更新,因此请查看最新的文档和示例代码以获取最新信息。

这个示例提供了一个基本的框架,你可以根据需要进行扩展和修改。

回到顶部