Flutter 视频播放器插件

pub package

一个 Flutter 插件,用于 iOS、Android 和 Web,可在 Widget 表面上播放视频。

The example app running in iOS

安装

首先,将 video_player 添加为 pubspec.yaml 文件中的一个 依赖项

iOS

此插件需要 iOS 9.0 或更高版本。将以下条目添加到你的 Info.plist 文件中,该文件位于 <project root>/ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

此条目允许你的应用通过 URL 访问视频文件。

Android

确保你的 Android Manifest 文件中存在以下权限,该文件位于 <project root>/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

Flutter 项目模板已添加此项,因此它可能已存在。

Web

此插件自 0.10.5 版本起支持 Web 平台编译,在足够新的 Flutter 版本 (>=1.12.13+hotfix.4) 中。

Web 平台不支持 dart:io,因此请避免使用该插件的 VideoPlayerController.file 构造函数。使用该构造函数尝试创建 VideoPlayerController.file 将会引发 UnimplementedError

不同的 Web 浏览器可能具有不同的视频播放功能(支持的格式、自动播放等)。请查看 package:video_player_web 以获取更多 Web 特定信息。

VideoPlayerOptions.mixWithOthers 选项在 Web 上无法实现,至少目前是这样。如果你在 Web 上使用此选项,它将被静默忽略。

支持的格式

  • 在 iOS 上,后备播放器是 AVPlayer
    支持的格式因 iOS 版本而异,AVURLAsset
    具有可以查询支持的 AV 格式的 audiovisualTypes
  • 在 Android 上,后备播放器是 ExoPlayer
    有关支持格式的列表,请参见 此处
  • 在 Web 上,可用格式取决于用户的浏览器(供应商和版本)。有关更具体的信息,请查看 package:video_player_web

示例

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

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://github.flutterdart.cn/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

用法

以下部分包含超出文档范围的使用信息,
以提供更详细的 API 概述。

目前还不完整。你可以通过 打开一个 pull request 来贡献此部分。

播放速度

你可以通过
调用 _controller.setPlaybackSpeed 来设置 _controller (VideoPlayerController 的实例) 的播放速度。setPlaybackSpeed 接受一个 double 类型的速度值,表示
你视频的播放速率。
例如,当给定值为 2.0 时,你的视频将以正常播放速度的 2 倍播放
等等。

有关播放速度限制的详细信息,请参见 setPlaybackSpeed 方法文档

此外,请参阅示例应用以获取播放速度实现的示例。

GitHub

查看 Github