[video_player_ios] Video player not rendering frame but video position keeps updating

[akindone]

Steps to Reproduce

1. Run flutter create bug.
2. Update the files as follows: ...

import 'dart:math';

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

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

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

class IosVideoDisappear extends StatefulWidget {
  @override
  _IosVideoDisappearState createState() => _IosVideoDisappearState();
}

class _IosVideoDisappearState extends State<IosVideoDisappear> {
  VideoPlayerController controller1;
  VideoPlayerController controller2;

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

  Future<void> initVideoPlayerController() async {
    VideoPlayerController initController(String url) {
      var controller = url.startsWith('http')
          ? VideoPlayerController.network(url)
          : VideoPlayerController.asset(url);
      controller.addListener(() {
        setState(() {});
      });
      controller.setLooping(false);
      controller.initialize().then((value) => setState(() {}));
      controller.play();
      return controller;
    }

    controller1 = initController(getRandomUrl());
    controller2 = initController(getRandomUrl());
  }

  Future<void> changeVideo() async {
    controller1.pause();
    controller2.pause();
    var lastController1 = controller1;
    var lastController2 = controller2;
    await initVideoPlayerController();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      lastController1.dispose();
      lastController2.dispose();
    });
  }

  String getRandomUrl() {
    return videoUrls[Random().nextInt(videoUrls.length)];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              SizedBox(
                width: 960,
                height: 600,
                child: _buildVideoView(controller1),
              ),
              SizedBox(
                width: 300,
                height: 200,
                child: _buildVideoView(controller2),
              ),
            ],
          ),
          Wrap(
            spacing: 10,
            children: [
              RaisedButton(
                onPressed: () {
                  controller1?.pause();
                },
                child: Text('VideoLarge pause'),
              ),
              RaisedButton(
                onPressed: () {
                  controller1?.seekTo(Duration(seconds: 0));
                  controller1?.play();
                },
                child: Text('VideoLarge play'),
              ),
              RaisedButton(
                onPressed: changeVideo,
                child: Text('Random change'),
              ),
              RaisedButton(
                onPressed: () {
                  controller2?.pause();
                },
                child: Text('VideoSmall pause'),
              ),
              RaisedButton(
                onPressed: () {
                  controller2?.seekTo(Duration(seconds: 0));
                  controller2?.play();
                },
                child: Text('VideoSmall play'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildVideoView(VideoPlayerController controller) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: (controller?.value?.initialized ?? false)
              ? controller.value.aspectRatio
              : 16 / 9,
          child: (controller?.value?.initialized ?? false)
              ? VideoPlayer(controller)
              : Container(
                  color: Colors.black12,
                ),
        ),
        Text(
          _getPosition(controller),
        ),
      ],
    );
  }

  String _getPosition(VideoPlayerController controller) {
    return '${controller?.value?.position}/${controller?.value?.duration}';
  }
}

List<String> videoUrls = [
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.7.ppt.mp4',
];

3. ...

Expected results:every time press the "Random change" button will change the video, and the postion text can update

Actual results:about 2% chance will encounter the case: no video frame is rendered but the VideoPlayerController.value keep updating the position; press the pause /seek play button can controll the position but the frame of video is still not rendered
this is the demo video:
video_demo.zip

Logs

flutter analyze
Analyzing video_debug...                                                
No issues found! (ran in 2.2s)

 flutter doctor -v
[✓] Flutter (Channel stable, 1.20.2, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)
    • Flutter version 1.20.2 at /Users/jike/software/flutter
    • Framework revision bbfbf1770c (12 days ago), 2020-08-13 08:33:09 -0700
    • Engine revision 9d5b21729f
    • Dart version 2.9.1
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[TahaTesser]

Hi @akindone
Thanks for reproducible sample, I can reproducethe issue. no frame renders, video keeps going on iPhone XR

code sample

import 'dart:math';

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

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

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

class IosVideoDisappear extends StatefulWidget {
  @override
  _IosVideoDisappearState createState() => _IosVideoDisappearState();
}

class _IosVideoDisappearState extends State<IosVideoDisappear> {
  VideoPlayerController controller1;
  VideoPlayerController controller2;

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

  Future<void> initVideoPlayerController() async {
    VideoPlayerController initController(String url) {
      var controller = url.startsWith('http')
          ? VideoPlayerController.network(url)
          : VideoPlayerController.asset(url);
      controller.addListener(() {
        setState(() {});
      });
      controller.setLooping(false);
      controller.initialize().then((value) => setState(() {}));
      controller.play();
      return controller;
    }

    controller1 = initController(getRandomUrl());
    controller2 = initController(getRandomUrl());
  }

  Future<void> changeVideo() async {
    controller1.pause();
    controller2.pause();
    var lastController1 = controller1;
    var lastController2 = controller2;
    await initVideoPlayerController();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      lastController1.dispose();
      lastController2.dispose();
    });
  }

  String getRandomUrl() {
    return videoUrls[Random().nextInt(videoUrls.length)];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              SizedBox(
                width: 960,
                height: 600,
                child: _buildVideoView(controller1),
              ),
              SizedBox(
                width: 300,
                height: 200,
                child: _buildVideoView(controller2),
              ),
            ],
          ),
          Wrap(
            spacing: 10,
            children: [
              RaisedButton(
                onPressed: () {
                  controller1?.pause();
                },
                child: Text('VideoLarge pause'),
              ),
              RaisedButton(
                onPressed: () {
                  controller1?.seekTo(Duration(seconds: 0));
                  controller1?.play();
                },
                child: Text('VideoLarge play'),
              ),
              RaisedButton(
                onPressed: changeVideo,
                child: Text('Random change'),
              ),
              RaisedButton(
                onPressed: () {
                  controller2?.pause();
                },
                child: Text('VideoSmall pause'),
              ),
              RaisedButton(
                onPressed: () {
                  controller2?.seekTo(Duration(seconds: 0));
                  controller2?.play();
                },
                child: Text('VideoSmall play'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildVideoView(VideoPlayerController controller) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: (controller?.value?.initialized ?? false)
              ? controller.value.aspectRatio
              : 16 / 9,
          child: (controller?.value?.initialized ?? false)
              ? VideoPlayer(controller)
              : Container(
                  color: Colors.black12,
                ),
        ),
        Text(
          _getPosition(controller),
        ),
      ],
    );
  }

  String _getPosition(VideoPlayerController controller) {
    return '${controller?.value?.position}/${controller?.value?.duration}';
  }
}

List<String> videoUrls = [
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/5.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/6.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/7.7.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.1.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.3.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.5.ppt.mp4',
  'https://focus-resource.oss-cn-beijing.aliyuncs.com/camp/video/test/8.7.ppt.mp4',
];

flutter doctor -v

[✓] Flutter (Channel dev, 1.22.0-1.0.pre, on Mac OS X 10.15.6 19G2021, locale
    en-GB)
    • Flutter version 1.22.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision ce40de69b7 (5 days ago), 2020-08-20 07:31:50 -0700
    • Engine revision 81027ab0cc
    • Dart version 2.10.0 (build 2.10.0-45.0.dev)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 48.1.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.48.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.13.2

 
[✓] Connected device (4 available)            
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      13.6.1
    • macOS (desktop)        • macos                     • darwin-x64     • Mac
      OS X 10.15.6 19G2021
    • Web Server (web)       • web-server                • web-javascript •
      Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 84.0.4147.135

• No issues found!

[recastrodiaz]

I've seen this exact issue in a production app (iPhone XR). Audio keeps playing, video is frozen and position updates. I couldn't find any reason as to what could be causing this behaviour. This link might be relevant: https://stackoverflow.com/questions/36571222/avplayer-stuck-video-but-audio-works/55177203#55177203

[Yongle-Fu]

it is easy to trigger when you click continuously, and copyPixelBuffer always return NULL

[maheshj01]

Hi @akindone,
Thanks for filing the issue I tried the sample code and couldn't replicate the issue, I see that clicking the random button the video and the positon are always in sync, with the latest stable channel using the video_player : ^2.1.6, Everyone who is having the issue I would suggest to upgrade to latest stable channel with the latest plugin and verify the issue.

code sample

import 'dart:math';

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

void main() {
  runApp(
    MaterialApp(home: IosVideoDisappear()),
  );
}


class IosVideoDisappear extends StatefulWidget {
  @override
  _IosVideoDisappearState createState() => _IosVideoDisappearState();
}

class _IosVideoDisappearState extends State<IosVideoDisappear> {
  late VideoPlayerController controller1;
  late VideoPlayerController controller2;

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

  Future<void> initVideoPlayerController() async {
    VideoPlayerController initController(String url) {
      var controller = url.startsWith('http')
          ? VideoPlayerController.network(url)
          : VideoPlayerController.asset(url);
      controller.addListener(() {
        setState(() {});
      });
      controller.setLooping(false);
      controller.initialize().then((value) => setState(() {}));
      controller.play();
      return controller;
    }

    controller1 = initController(getRandomUrl());
    controller2 = initController(getRandomUrl());
  }

  Future<void> changeVideo() async {
    controller1.pause();
    controller2.pause();
    var lastController1 = controller1;
    var lastController2 = controller2;
    await initVideoPlayerController();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      lastController1.dispose();
      lastController2.dispose();
    });
  }

  String getRandomUrl() {
    String url = videoUrls[Random().nextInt(videoUrls.length)];
    print(url);
    return url;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              SizedBox(
                width: 960,
                height: 600,
                child: _buildVideoView(controller1),
              ),
              SizedBox(
                width: 300,
                height: 200,
                child: _buildVideoView(controller2),
              ),
            ],
          ),
          Wrap(
            spacing: 10,
            children: [
              ElevatedButton(
                onPressed: () {
                  controller1.pause();
                },
                child: Text('VideoLarge pause'),
              ),
              ElevatedButton(
                onPressed: () {
                  controller1.seekTo(Duration(seconds: 0));
                  controller1.play();
                },
                child: Text('VideoLarge play'),
              ),
              ElevatedButton(
                onPressed: changeVideo,
                child: Text('Random change'),
              ),
              ElevatedButton(
                onPressed: () {
                  controller2.pause();
                },
                child: Text('VideoSmall pause'),
              ),
              ElevatedButton(
                onPressed: () {
                  controller2.seekTo(Duration(seconds: 0));
                  controller2.play();
                },
                child: Text('VideoSmall play'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildVideoView(VideoPlayerController controller) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: (controller.value.isInitialized ?? false)
              ? controller.value.aspectRatio
              : 16 / 9,
          child: (controller.value.isInitialized ?? false)
              ? VideoPlayer(controller)
              : Container(
                  color: Colors.black12,
                ),
        ),
        Text(
          _getPosition(controller),
        ),
      ],
    );
  }

  String _getPosition(VideoPlayerController controller) {
    return '${controller.value.position}/${controller.value.duration}';
  }
}

List<String> videoUrls = [
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4'
];

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale en-IN)
    • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter
    • Framework revision f4abaa0735 (5 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 11.4 20F71 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.114

• No issues found!