Flutter视频播放插件film_video

Flutter视频播放插件film_video_player的使用

这个包基于`video_player`包。提供了一些功能和监听器。

注意：请使用网络URL来使用此插件。

构造函数

 FilmPlayer(
      {Key? key,
      this.progressBackgroundColor = const Color.fromRGBO(255, 0, 0, 0.7),
      this.progressBufferedColor = const Color.fromRGBO(50, 50, 200, 0.2),
      this.progressPlayedColor = const Color.fromRGBO(200, 200, 200, 0.5),
      required this.autoPlay,
      required this.title,
      this.backgroundColor = Colors.black,
      this.onClickVideoPlayer,
      this.showSuggestedVideosWhenEnd = true,
      this.radius = 10,
      this.useAutoSize = true,
      this.progressColor = Colors.blue,
      this.startAt,
      this.intro,
      this.skipIntroButton,
      this.videos,
      this.showVideos = false,
      required this.url,
      this.videoSize,
      this.errorWidget,
      this.loader,
      this.onError,
      this.playing,
      this.paused,
      this.onVideoItemClicked,
      this.end,
      this.seeked,
      this.loaded,
      this.start,
      this.showVideoDuration = true})
      : super(key: key) {
    if (useAutoSize == false) {
      assert(videoSize != null,
          "如果useAutoSize属性为false，请使用videoSize属性。 \n 示例: videoSize: const [.95, .27] ");
    }
  }

示例用法

FilmPlayer(
                onError: () {
                  print("ok");
                },
                progressPlayedColor: Colors.blue,
                useAutoSize: false,
                videoSize: const [.95, .27],
                onVideoItemClicked: (VideoItem videoItem) {
                  print(videoItem.title);
                },
                videos: [
                  VideoItem(
                      imageSrc:
                          "https://m.media-amazon.com/images/M/MV5BMTUzNTc3MTU3M15BMl5BanBnXkFtZTcwMzIxNTc3NA@@._V1_.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie 2",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "http://gonewiththetwins.com/new/wp-content/uploads/2017/06/cars.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie 11",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/DC0C820B5E4DFBB73C1D5CB97794184C54CA2312AE46EFDCF8DC07F8C94744A7/scale?width=1200&aspectRatio=1.78&format=jpeg",
                      title: "The Cars On The Road",
                      subtitle: "Watch on disney plus",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "https://m.media-amazon.com/images/M/MV5BMTUzNTc3MTU3M15BMl5BanBnXkFtZTcwMzIxNTc3NA@@._V1_.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie ",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                ],
                seeked: (duration, isForward) {
                  print("事件:$isForward");
                },
                loaded: (VideoPlayerController controller) {
                  print("事件:loaded $controller");
                },
                playing: (duration) {
                  print("事件:playing");
                },
                end: () {
                  print("事件:video end");
                },
                start: () {
                  print("事件:video play");
                },
                paused: () {
                  print("事件:paused");
                },
                intro: const [Duration(seconds: 5), Duration(seconds: 10)],
                url:
                    "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4",
                autoPlay: false,
                title: "这是视频字幕",
                showVideoDuration: true,
              )

关于尺寸

如果你将useAutoSize设置为true，视频播放器将使用AspectRatio小部件进行包装。
你也可以给定特定的宽度和高度。
示例: videoSize: const [.95, .27]

自定义加载器

例如: loader: Text("请等待")

自定义错误消息

例如: errorWidget: Text("错误")

如果你需要捕获错误，请使用onError属性

自定义背景色

使用backgroundColor属性来设置新的背景颜色。

backgroundColor: Colors.red

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              FilmPlayer(
                onError: () {
                  print("ok");
                },
                progressPlayedColor: Colors.blue,
                useAutoSize: false,
                videoSize: const [.95, .27],
                onVideoItemClicked: (VideoItem videoItem) {
                  print(videoItem.title);
                },
                videos: [
                  VideoItem(
                      imageSrc:
                          "https://m.media-amazon.com/images/M/MV5BMTUzNTc3MTU3M15BMl5BanBnXkFtZTcwMzIxNTc3NA@@._V1_.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie 2",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "http://gonewiththetwins.com/new/wp-content/uploads/2017/06/cars.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie 11",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/DC0C820B5E4DFBB73C1D5CB97794184C54CA2312AE46EFDCF8DC07F8C94744A7/scale?width=1200&aspectRatio=1.78&format=jpeg",
                      title: "The Cars On The Road",
                      subtitle: "Watch on disney plus",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                  VideoItem(
                      imageSrc:
                          "https://m.media-amazon.com/images/M/MV5BMTUzNTc3MTU3M15BMl5BanBnXkFtZTcwMzIxNTc3NA@@._V1_.jpg",
                      title: "The Cars",
                      subtitle: "The Cars Movie ",
                      url:
                          "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4"),
                ],
                seeked: (duration, isForward) {
                  print("事件:$isForward");
                },
                loaded: (VideoPlayerController controller) {
                  print("事件:loaded $controller");
                },
                playing: (duration) {
                  print("事件:playing");
                },
                end: () {
                  print("事件:video end");
                },
                start: () {
                  print("事件:video play");
                },
                paused: () {
                  print("事件:paused");
                },
                intro: const [Duration(seconds: 5), Duration(seconds: 10)],
                url:
                    "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_7MB_MP4.mp4",
                autoPlay: false,
                title: "这是视频字幕",
                showVideoDuration: true,
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

sinazl 1楼

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

film_video_player 是一个用于 Flutter 的视频播放插件，支持播放本地和网络视频。以下是如何在 Flutter 项目中使用 film_video_player 插件的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 film_video_player 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  film_video_player: ^0.1.0  # 请检查最新版本

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

2. 导入插件

在 Dart 文件中导入 film_video_player 插件：

import 'package:film_video_player/film_video_player.dart';

3. 使用 FilmVideoPlayer

可以在你的 Flutter 应用中使用 FilmVideoPlayer 控件来播放视频。以下是一个简单的示例：

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

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

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

  @override
  void initState() {
    super.initState();
    _controller = FilmVideoPlayerController(
      videoUrl: 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4',
    )..initialize().then((_) {
      // 视频初始化完成后，更新UI
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: _controller!.isInitialized
            ? AspectRatio(
                aspectRatio: _controller!.value.aspectRatio,
                child: FilmVideoPlayer(controller: _controller!),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: VideoPlayerScreen(),
));

4. 配置和控制视频播放

FilmVideoPlayerController 提供了多种方法来控制视频的播放、暂停、停止等操作。以下是一些常用的控制方法：

play(): 播放视频。
pause(): 暂停视频。
seekTo(Duration position): 跳转到指定的时间点。
setVolume(double volume): 设置音量。
dispose(): 释放资源。

5. 处理全屏播放

film_video_player 还支持全屏播放。你可以通过设置 FilmVideoPlayerController 的 fullScreen 属性来控制全屏模式。

_controller!.setFullScreen(true);  // 进入全屏模式
_controller!.setFullScreen(false); // 退出全屏模式

6. 监听视频状态

你可以通过监听 FilmVideoPlayerController 的状态来获取视频的播放进度、缓冲状态等信息。

_controller!.addListener(() {
  if (_controller!.value.isPlaying) {
    // 视频正在播放
  } else {
    // 视频暂停
  }

  if (_controller!.value.isBuffering) {
    // 视频正在缓冲
  }
});

7. 处理错误

如果视频加载或播放过程中出现错误，你可以监听错误事件并进行处理。

_controller!.addErrorListener((error) {
  print('Error: $error');
});

Flutter视频播放插件film_video_player的使用