Question 255381 in Flutter Question posted in
The official Flutter documentation can be found here.

How to embed YouTube videos into Flutter app to start from a specified timestamp?

If you click on a YouTube video besides letting you copy the link, YouTube lets you to copy the link to start from the current time of playing. How can I do that on Flutter with YouTube embedded videos?

I used youtube_player_flutter and used YouTube URLs instead of video IDs, but even if I add a timestamp to the end of the links it still starts from the beginning. Is it possible to do it with this plugin? Is there another plugin capable of doing that?

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      title: 'Flutter Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  static String videoId = 'BBAyRBTfsOU';

  static int startTime = 150;

  static String youtubeUrlWithStartTime =
      'https://www.youtube.com/watch?v=$videoId&t=$startTime';

  final YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: videoId,
    flags: const YoutubePlayerFlags(
      autoPlay: true,
      mute: false,
    ),
  );

  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter and Youtube'),
      ),
      body: YoutubePlayer(
        controller: _controller,
        liveUIColor: Colors.amber,
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can use the startAt property in your YoutubePlayerFlags for that.

    https://pub.dev/documentation/youtube_player_flutter/latest/youtube_player_flutter/YoutubePlayerFlags/startAt.html

    startAt property.
    int startAt.
    final.
    Specifies the default starting point of the video in seconds

    Default is 0.

    Login or Signup to reply.
  2. 0

    Use this example from Flutter’s github page, replace the url of the bee video with the youtube video in question, and then use the query param t to set the start_at value. It looks like &t=10 at the end of the share url if you’re starting from 10s, for example.

    Remove the main() function if you already have an app + router/pages set up in your project i.e. you’re just linking to this widget.

    Hope this helps.

    Edit: I realize you’re trying to do more with a ListView, but this example should get you started. Since video_player is actively maintained by Flutter, it may work better than youtube_player_flutter, or at least as-expected (former updated <2 weeks ago, latter >9months ago).

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

void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

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

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search