Flutter视频查看插件video_viewer的使用

video_viewer 是一个功能强大的Flutter插件，用于在应用中显示和播放视频。它提供了丰富的UI/UX、动画效果、字幕支持等特性。

特性

• 精美的UI/UX设计
• 华丽的动画效果
• 支持流媒体聊天
• 自定义广告支持
• 完全可定制
• 支持HLS (m3u8)格式
• 字幕（Subtitle）支持
• 视频剪辑（只显示特定时间的视频）
• 易于实现且功能强大！

预览

可以查看完整的源代码示例：example

高质量视频演示：高清视频演示

安装

Android

在 AndroidManifest.xml 文件中添加以下权限：

<manifest>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application android:usesCleartextTraffic="true"></application>
</manifest>

iOS

在 Info.plist 文件中添加以下条目：

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

注意: 在iOS模拟器上无法正常运行视频播放器，需要在真实设备上进行开发和测试。

全局手势

• 单击：显示或隐藏包含播放/暂停控件和进度条的覆盖层
• 双击：
  • 左侧：双击视频左侧会快退，默认10秒。
  • 右侧：双击视频右侧会快进，默认10秒。
• 水平拖动：
  • 向左：向左水平移动会按距离比例快退。
  • 向右：向右水平移动会按距离比例快进。
• 垂直拖动：
  • 向上：按距离比例增加音量。
  • 向下：按距离比例减少音量。
• 缩放拖动：当视频处于全屏和横屏模式时，可以通过缩放来填满屏幕宽度。

示例代码

使用 VideoViewerController

class UsingVideoControllerExample extends StatefulWidget {
  UsingVideoControllerExample({Key key}) : super(key: key);

  @override
  _UsingVideoControllerExampleState createState() => _UsingVideoControllerExampleState();
}

class _UsingVideoControllerExampleState extends State<UsingVideoControllerExample> {
  final VideoViewerController controller = VideoViewerController();

  @override
  Widget build(BuildContext context) {
    return VideoViewer(
      controller: controller,
      source: {
        "SubRip Text": VideoSource(
          video: VideoPlayerController.network(
              "https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4"),
          subtitle: {
            "English": VideoViewerSubtitle.network(
              "https://felipemurguia.com/assets/txt/WEBVTT_English.txt",
              type: SubtitleType.webvtt,
            ),
          },
        )
      },
    );
  }

  VideoPlayerController getVideoPlayer() => controller.controller;
  String getactiveSourceNameName() => controller.activeSourceName;
  String getActiveCaption() => controller.activeCaption;
  bool isFullScreen() => controller.isFullScreen;
  bool isBuffering() => controller.isBuffering;
  bool isPlaying() => controller.isPlaying;
}

HLS网络视频（仅适用于Android和iOS）

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, VideoSource>>(
      future: VideoSource.fromM3u8PlaylistUrl(
        "https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8",
        formatter: (quality) => quality == "Auto" ? "Automatic" : "${quality.split("x").last}p",
      ),
      builder: (_, data) {
        return data.hasData
            ? VideoViewer(
                source: data.data,
                onFullscreenFixLandscape: true,
                style: VideoViewerStyle(
                  thumbnail: Image.network(
                    "https://play-lh.googleusercontent.com/aA2iky4PH0REWCcPs9Qym2X7e9koaa1RtY-nKkXQsDVU6Ph25_9GkvVuyhS72bwKhN1P",
                  ),
                ),
              )
            : CircularProgressIndicator();
      },
    );
  }
}

网络视频带WebVTT字幕

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

  @override
  Widget build(BuildContext context) {
    return VideoViewer(
      source: {
        "WebVTT Caption": VideoSource(
          video: VideoPlayerController.network(
            //This video has a problem when end
            "https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4",
          ),
          subtitle: {
            "English": VideoViewerSubtitle.network(
              "https://felipemurguia.com/assets/txt/WEBVTT_English.txt",
            ),
            "Spanish": VideoViewerSubtitle.network(
              "https://felipemurguia.com/assets/txt/WEBVTT_Spanish.txt",
            ),
          },
        )
      },
    );
  }
}

网络视频带SubRip字幕

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

  @override
  Widget build(BuildContext context) {
    final String content = '''
      1
      00:00:03,400 --> 00:00:06,177
      In this lesson, we're going to
      be talking about finance. And

      2
      00:00:06,177 --> 00:00:10,009
      one of the most important aspects
      of finance is interest.
      ...
    ''';

    return VideoViewer(
      source: {
        "SubRip Caption": VideoSource(
          video: VideoPlayerController.network(
              "https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4"),
          subtitle: {
            "English": VideoViewerSubtitle.content(
              content,
              type: SubtitleType.srt,
            ),
          },
        )
      },
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 video_viewer 插件来创建一个简单的电影页面。

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

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

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

class MoviePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Movie Page'),
      ),
      body: Center(
        child: VideoViewer(
          source: {
            "Trailer": VideoSource(
              video: VideoPlayerController.network(
                  "https://felipemurguia.com/assets/videos/the_witcher_trailer.mp4"),
            )
          },
        ),
      ),
    );
  }
}

以上代码展示了一个基本的电影页面，使用 video_viewer 插件来播放一个网络视频。通过这个插件，您可以轻松地在Flutter应用中集成视频播放功能，并根据需要进行自定义。