Flutter dev server breaks seekTo() in video_player when playing from assets.

[mjschaefer9395]

When testing an audio only (MP3) file, VideoPlayerController seekTo(Duration position) always resets the current position to zero when targeting web and using a Chrome client. It works correctly with an AVD.

[mjschaefer9395]

Tested using Chrome Version 79.0.3945.130 (Official Build) (64-bit) on Max OS Catalina v10.15.2

[mjschaefer9395]

Flutter (Channel master, v1.14.2-pre.51, on Mac OS X 10.15.2 19C57, locale en-US)

[ditman]

Hey @mjschaefer9395, just a couple of questions.

• Can you provide some minimal repro code that exhibits the issue?
• What's "an AVD"? Is that other audio/video format, or something else?

Thanks!

[mjschaefer9395]

Hello @ditman, after some additional testing, I have found the following:

When targeting web/chrome:

• seekTo works correctly when accessing an MP3 from a network resource (VideoPlayerController.network)
• seekTo always resets the current position to zero when accessing an MP3 from a local asset (VideoPlayerController.asset)

Please see initState() in the following sample code. You can comment-out either the network() or asset() code to hot reload and test each access method. Please note that you will need to provide your own local MP3 file to test the asset() method.

When you run the app, drag the slider to adjust the time offset.

AVD = Android Virtual Device (An android emulator). In my previous testing, I think the asset() method might have worked correctly when I accessed a Flutter web app via Chrome on an AVD. I can't confirm that at the moment however because I am working through a Firebase deployment issue.

Thank you!

import 'dart:async';

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

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

class MP3Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MP3 Test',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  VideoPlayerController _vpc;
  Future<void> _vpcInit;
  int _audioPosition = 0;

  @override
  void initState() {
    super.initState();

    // seekTo works correctly when accessing an MP3 via the network.
    _vpc = VideoPlayerController.network(
      'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
    );

    // seekTo always resets to position 0 when accessing an MP3 as a local asset.
    // NOTE: You will need to provide your own local MP3 file.
    // _vpc = VideoPlayerController.asset(
    //   'assets/[YOUR MP3 FILENAME].mp3',
    // );

    _vpcInit = _vpc.initialize();

    _vpc.addListener(() {
      setState(() {
        _audioPosition = _vpc.value.position.inSeconds;
      });
    });
  }

  @override
  void dispose() {
    _vpc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _vpcInit,
        builder: (context, snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return Center(child: CircularProgressIndicator());
          } else {
            return Container(
              color: Colors.blue,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    FlatButton(
                      color: Colors.white,
                      child: Icon(
                        _vpc.value.isPlaying ? Icons.pause : Icons.play_arrow,
                      ),
                      onPressed: () {
                        setState(() {
                          _vpc.value.isPlaying ? _vpc.pause() : _vpc.play();
                        });
                      },
                    ),
                    SizedBox(height: 20),
                    Container(
                      margin: EdgeInsets.symmetric(horizontal: 50),
                      height: 50,
                      color: Colors.white,
                      child: Container(
                        child: Slider(
                          min: 0,
                          max: _vpc.value.duration.inSeconds.toDouble(),
                          value: _audioPosition.toDouble(),
                          onChanged: (value) {
                            setState(() {
                              _audioPosition = value.toInt();
                            });
                          },
                          onChangeEnd: (value) {
                            _vpc.seekTo(Duration(seconds: _audioPosition));
                          },
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Text('Position: $_audioPosition'),
                  ],
                ),
              ),
            );
          }
        },
      ),
    );
  }
}

[ditman]

Thanks for reporting and the sample code, very helpful!! I'll check it out ASAP.

This is odd because at the end of the day, asset and network videos should be the same (or very similar) on the web. It's just that "asset" media comes from your own domain, since it's hosted alongside the index.html of your app, instead of on a separate CDN.

The only difference I can think of off the top of my head is that maybe flutter's dev server doesn't support HTTP range requests to do seeks (like download from byte X), and the server from which you're downloading your network MP3s does (You may be able to see this by looking at Chrome's Web Developer Tools.)

Does this issue happen when you deploy your app to a proper CDN? Or is this only happening on local development?

See a similar issue in another media playback project where they end up finding out it was a server-side config issue (they don't mention which one, though).