Flutter视频播放插件modjs_video_player的使用

modjs_video_player 是一个用于在 Flutter 应用中播放视频的插件。它基于 video_player 插件，并扩展了一些额外的功能。以下是使用 modjs_video_player 的基本步骤和示例代码。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  modjs_video_player: ^1.0.0  # 请确保使用最新版本

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

2. 导入插件

在需要使用视频播放功能的 Dart 文件中导入 modjs_video_player：

import 'package:modjs_video_player/modjs_video_player.dart';

3. 初始化视频播放器

使用 ModJsVideoPlayerController 来初始化视频播放器。你可以通过传递视频的 URL 或其他参数来配置播放器。

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  ModJsVideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = ModJsVideoPlayerController.network(
      'https://www.example.com/sample.mp4',
      autoPlay: true,
      looping: true,
    )..initialize().then((_) {
        setState(() {});
      });
  }

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

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

4. 控制视频播放

你可以使用 ModJsVideoPlayerController 提供的各种方法来控制视频的播放、暂停、跳转等。

_controller.play();  // 播放视频
_controller.pause(); // 暂停视频
_controller.seekTo(Duration(seconds: 10)); // 跳转到指定时间

5. 监听视频播放状态

你可以监听视频的播放状态、缓冲状态、播放完成等事件。

_controller.addListener(() {
  if (_controller.value.isPlaying) {
    // 视频正在播放
  } else if (_controller.value.isBuffering) {
    // 视频正在缓冲
  } else if (_controller.value.duration == _controller.value.position) {
    // 视频播放完成
  }
});

6. 处理全屏播放

modjs_video_player 通常支持全屏播放功能。你可以通过监听用户的双击事件来切换全屏模式。

GestureDetector(
  onDoubleTap: () {
    _controller.toggleFullScreen();
  },
  child: ModJsVideoPlayer(_controller),
);

7. 自定义 UI

你可以根据需要自定义视频播放器的 UI，比如添加自定义的控制按钮、进度条等。

Stack(
  children: [
    ModJsVideoPlayer(_controller),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: VideoProgressIndicator(
        _controller,
        allowScrubbing: true,
      ),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: IconButton(
        icon: Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow),
        onPressed: () {
          setState(() {
            _controller.value.isPlaying ? _controller.pause() : _controller.play();
          });
        },
      ),
    ),
  ],
);

8. 处理错误

在视频加载或播放过程中可能会发生错误，你可以通过监听错误事件来处理这些情况。

_controller.addListener(() {
  if (_controller.value.hasError) {
    // 处理错误
    print('Error: ${_controller.value.errorDescription}');
  }
});

9. 释放资源

在页面销毁时，确保释放视频播放器的资源。

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

10. 其他功能

modjs_video_player 可能还提供了其他高级功能，比如播放速度控制、字幕支持、画中画模式等。你可以查阅插件的文档以获取更多信息。

示例代码

以下是一个完整的示例代码：

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

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  ModJsVideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = ModJsVideoPlayerController.network(
      'https://www.example.com/sample.mp4',
      autoPlay: true,
      looping: true,
    )..initialize().then((_) {
        setState(() {});
      });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: Stack(
                  children: [
                    ModJsVideoPlayer(_controller),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: VideoProgressIndicator(
                        _controller,
                        allowScrubbing: true,
                      ),
                    ),
                    Positioned(
                      bottom: 10,
                      right: 10,
                      child: IconButton(
                        icon: Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow),
                        onPressed: () {
                          setState(() {
                            _controller.value.isPlaying ? _controller.pause() : _controller.play();
                          });
                        },
                      ),
                    ),
                  ],
                ),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

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