Flutter网页视频播放插件webviewtube的使用

Flutter网页视频播放插件webviewtube的使用

使用说明

使用 IFrame Player API 和 WebView 在移动设备上播放 YouTube 视频。此包利用了 webview_flutter 来通过 IFrame Player API 插入一个 YouTube 视频播放器，并且使用了 provider 包进行状态管理。

示例代码

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

import 'customized_player.dart';
import 'playlist_player.dart';
import 'webviewtube_decorated_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: 'Webviewtube',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const WebviewtubeDemo(),
    );
  }
}

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

  [@override](/user/override)
  State<WebviewtubeDemo> createState() => _WebviewtubeDemoState();
}

class _WebviewtubeDemoState extends State<WebviewtubeDemo> {
  final controller = WebviewtubeController();
  final options = const WebviewtubeOptions(
      forceHd: true, loop: true, interfaceLanguage: 'en');

  [@override](/user/override)
  void dispose() {
    // 如果向播放器传递了一个控制器，请记得在不需要时释放它以释放资源。
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Webviewtube Demo'),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 1),
        children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Default IFrame Player',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
              ),
              WebviewtubePlayer(
                videoId: '4AoFA19gbLo',
                options: options,
                controller: controller,
              ),
            ],
          ),
          const SizedBox(height: 70),
          ElevatedButton(
            onPressed: () async {
              controller.pause();
              debugPrint(
                  '${controller.value.videoMetadata.title} paused at ${controller.value.position}');
              await Navigator.of(context).push<void>(MaterialPageRoute(
                  builder: (_) => const WebviewtubeDecoratedPlayer()));
              // 当返回时，使播放器继续播放
              controller.play();
              debugPrint(
                  'Continue to play ${controller.value.videoMetadata.title}');
            },
            child: const Text(
              'Webviewtube Decorated Player',
              style: TextStyle(fontSize: 16),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              controller.pause();
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const CustomizedPlayer()));
            },
            child: const Text(
              'Customized Player',
              style: TextStyle(fontSize: 16),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              controller.pause();
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const PlaylistPlayer()));
            },
            child: const Text(
              'Playlist Player',
              style: TextStyle(fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

示例演示

1. 默认 iFrame 播放器
   • 示例代码中展示了如何创建一个默认的 iFrame 播放器。可以通过传入 videoId 和 options 来配置播放器。

2

1. 装饰过的播放器
   • 示例代码中展示了如何创建一个装饰过的播放器。装饰过的播放器结合了默认播放器和自定义控件，提供了更集成化的播放器体验。

1. 定制播放器
   • 示例代码中展示了如何根据需要自定义播放器。可以参考 example/lib/customized_player.dart 文件来了解如何控制播放器并根据播放器事件和状态更新 UI。

支持平台

• Android: SDK 19+
• iOS: 11.0+

设置

• Android
  • 在 android/app/build.gradle 中设置正确的 minSdkVersion。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

• iOS
  • 不需要配置。

使用方法

• 查看 example/lib/ 以获取更多详细信息。

配置播放器

• 通过传递 WebviewtubeOptions 来配置播放器。

final options = const WebviewtubeOptions(
    forceHd: true,
    enableCaption: false,
);

/// `showControls` 将始终为假 [WebviewtubeVideoPlayer]
WebviewtubeVideoPlayer(videoId: '4AoFA19gbLo', options: options);

与玩家交互

• 要与播放器交互（例如：检索视频元数据、控制播放）以及管理其状态（例如：暂停、加载新视频），请使用 WebviewtubeController。确保将此控制器传递给播放器实例，并在不再需要时记得释放它以释放资源。

// ...
// 在状态类中
final controller = WebviewtubeController();

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

[@override](/user/override)
Widget build(BuildContext context) {
    return WebviewtubeVideoPlayer(
      videoId: '4AoFA19gbLo',
      controller: controller,
    );
}