Flutter YouTube视频播放插件youtube_player_flutter_ifraim的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter YouTube视频播放插件youtube_player_flutter_ifraim的使用

youtube_player

![pub version] 0.0.2

平台支持

Windows Android iOS Web
✔️ ✔️ ✔️ ✔️

示例

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 280,
      child: YoutubePlayer(
        controller: YoutubePlayerController(
          youtubeUrl: 'https://www.youtube.com/watch?v=BddP6PYo2gs',
        ),
      ),
    );
  }
}

示例代码

在 example/lib/main.dart 文件中：

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter_ifraim/youtube_player.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 280,
      child: YoutubePlayer(
        controller: YoutubePlayerController(
          youtubeUrl: 'https://www.youtube.com/watch?v=BddP6PYo2gs', // YouTube 视频 URL
        ),
      ),
    );
  }
}

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

1 回复

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


当然，关于youtube_player_flutter_iframe插件的使用，下面是一个简单的代码案例，展示了如何在Flutter应用中嵌入并播放YouTube视频。这个插件允许你通过嵌入iframe的方式来播放YouTube视频，非常适合需要在Flutter应用中集成YouTube视频播放功能的场景。

首先，你需要在你的pubspec.yaml文件中添加youtube_player_flutter_iframe依赖：

dependencies:
  flutter:
    sdk: flutter
  youtube_player_flutter_iframe: ^^最新版本号（请替换为实际最新版本）

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中创建一个页面来展示YouTube视频。以下是一个完整的示例代码：

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

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

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

class YouTubeVideoPlayerPage extends StatefulWidget {
  @override
  _YouTubeVideoPlayerPageState createState() => _YouTubeVideoPlayerPageState();
}

class _YouTubeVideoPlayerPageState extends State<YouTubeVideoPlayerPage> {
  // YouTube 视频 ID
  final String videoId = '你的YouTube视频ID'; // 替换为你的YouTube视频ID

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Video Player'),
      ),
      body: Center(
        child: YoutubePlayerIframe(
          controller: YoutubePlayerController(
            initialVideoId: videoId,
            params: YoutubePlayerParams(
              showControls: true,
              mute: false,
              autoPlay: false,
              loop: false,
              startAt: Duration(seconds: 0),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个MyApp类作为应用的入口。
  2. YouTubeVideoPlayerPage是一个有状态的Widget，它包含了YouTube视频播放器。
  3. YoutubePlayerIframe组件用于嵌入和播放YouTube视频。YoutubePlayerController用于控制视频播放器的行为，比如设置初始视频ID、播放参数等。
  4. videoId变量需要替换为你想要播放的YouTube视频的ID。

确保你已经替换了videoId变量的值为实际的YouTube视频ID，并且youtube_player_flutter_iframe插件的版本号为当前可用的最新版本。

这个简单的示例展示了如何使用youtube_player_flutter_iframe插件在Flutter应用中嵌入和播放YouTube视频。你可以根据需要进一步自定义播放器的行为和样式。

回到顶部