Hey @balvinderz,

video_player allows now to add http headers to request. (https://github.com/flutter/plugins/pull/3671)

Do you plan to implement that feature to allow to access secured .aac files directly from storage?

In my case I store .aac files in secured Amazon S3 Bucket. I have to be able to calculate separate HTTPS tokens for every .aac file just before I fetch them.

Thanks!

First of all, thank you for creating such a wonderful library. However, a problem occurred during use.

problem

VideoControllerValue is not initialized in the Mobile Chromium browser.

Firefox mobile is okay, but with Safari, Edge, Chrome, and Samsung Internet browsers occurs problem. Only with hls video.

code

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final VideoPlayerController videoPlayerController;

  @override
  void initState() {
    super.initState();
    videoPlayerController = VideoPlayerController.network(
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      formatHint: VideoFormat.hls,
    )..initialize().then((_) {
        // videoPlayerController.play();
        videoPlayerController.setLooping(true);
      });
    videoPlayerController.addListener(() {
      debugPrint(videoPlayerController.value.toString());
    });
  }

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

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

flutter doctor -v

[✓] Flutter (Channel stable, 3.3.0, on macOS 12.6 21G115 darwin-arm, locale ko-KR)
    • Flutter version 3.3.0 on channel stable at /Users/bluejoy/development/sdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffccd96b62 (3달 전), 2022-08-29 17:28:57 -0700
    • Engine revision 5e9e0e0aa8
    • Dart version 2.18.0
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/bluejoy/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 70.2.5
    • Dart plugin version 222.4167.21

[✓] VS Code (version 1.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Hello, even with the plugin I keep getting this error what can I do to fix it?

Uncaught (in promise) Error: PlatformException (MEDIA_ERR_SRC_NOT_SUPPORTED, No further diagnostic information can be determined or provided., The video has been found to be unsuitable (missing or in a format not supported by your browser).)

Thank you very much in advance!

Is it possible to extend VideoPlayerController so I can change the video quality of hls streams. Hls.js supports changing the video quality but I can't figure out how to call the Hls.js api.

.I'm trying to play hls videos using video_player_web in my flutter web app. But when I try to load the videos it keeps giving "TypeError: Cannot read properties of undefined (reading 'isSupported') at video_player_web_hls.VideoPlayer.new.initialize (http://localhost:46773/packages/video_player_web_hls/video_player_web hls.dart.li b.js:260:37) at video_player_web_hls.VideoPlayerPluginHls.new.create (http://localhost:46773/packages/video_player_web_hls/video_player_web_ hls.dart.li b.js:181:16) at create.next () at runBody (http://localhost:46773/dart_sdk.js:39250:34) at Object.async [as async] (http://localhost:46773/dart_sdk.js:39281:7) at video_player_web_hls.VideoPlayerPluginHls.new.create (http://localhost:46773/packages/video_player_web_hls/video_player_web hls.dart.li b.js:155:20) at video_player.VideoPlayerController.network.initialize (http://localhost:46773/packages/video_player/video_player.dart.lib.js: 949:69) at initialize.next () at runBody (http://localhost:46773/dart_sdk.js:39250:34) at Object._async [as async] (http://localhost:46773/dart_sdk.js:39281:7) at video_player.VideoPlayerController.network.initialize (http://localhost:46773/packages/video_player/video_player.dart.lib.js: 923:20) at http://localhost:46773/packages/demotest/main.dart.lib.js:287:14 at main._VideoAppState.new.initState (http://localhost:46773/packages/demotest/main.dart.lib.js:292:11) at framework.StatefulElement.new.[_firstBuild] (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:53342 :54) at framework.StatefulElement.new.mount (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:30229 :28) at RenderObjectToWidgetElement.new.inflateWidget (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:28991 :16) at RenderObjectToWidgetElement.new.updateChild (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:28845 :25) at RenderObjectToWidgetElement.new.[_rebuild] (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:55830 :37) at RenderObjectToWidgetElement.new.mount (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:55809 :29) at http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.li b.js:55742: 37 at framework.BuildOwner.new.buildScope (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:52787 :13) at RenderObjectToWidgetAdapter.new.attachToRenderTree (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:55741 :17) at binding$5.WidgetsFlutterBinding.new.attachRootWidget (http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.l ib.js:55608 :238) at http://localhost:46773/packages/flutter/src/widgets/widget_span.dart.li b.js:55601: 14 at internalCallback (http://localhost:46773/dart_sdk.js:25311:11)"

Below is the code I'm using

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

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

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

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

  @override
  void initState() {
    super.initState();
    try {
      _controller = VideoPlayerController.network(
          'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8')
        ..initialize().then((_) {
          // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
          setState(() {});
        });
      _controller!.setVolume(0.0);
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller!.value.initialized
              ? 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();
  }
}

Can anyone help me how to solve this issues

I am using the video_player_web_hls on top of flick_video_player to play .m3u8 videos in my flutter web app. the plugin works fine for normal .m3u8 URLs but when I am trying to implement signed cookies for web and pass cookies in header. I get the following error which says Refused to set unsafe header "Cookie"

Can you please help me out if its something wrong implemented from my side or its problem from the plugin side.

Following is my sudo code examples which I have tried

1. Example 1

    `String cookie = "CloudFront-Policy=$cloudFrontPolicy" + ";CloudFront-Signature=$loudFrontSignature" +
          ";CloudFront-Key-Pair-Id=$cloudFrontKeyPairId";
   
      httpHeaders = {
        "useCookie": "true",
        "Cookie": cookie,
      };
   
      playerController = VideoPlayerController.network(playUrl,
        httpHeaders: httpHeaders,
     );`
   

2. Example 2

      `httpHeaders = {
         "useCookie": "true",
        "CloudFront-Policy": "${_cookieDetails.cloudFrontPolicy}",
        "CloudFront-Signature": "${_cookieDetails.cloudFrontSignature}",
        "CloudFront-Key-Pair-Id": "${_cookieDetails.cloudFrontKeyPairId}"
      };
   
      playerController = VideoPlayerController.network(playUrl,
        httpHeaders: httpHeaders,
     );`
   

I have gone through the example link an everything went fine. I have created a stream in Azure services and I have been given several options but none of them are suitable to the example in hand. I'm not an expert in video streaming but was wondering how this could be achieved.

hls : https://gnmservicerecording-usea.streaming.media.azure.net/f1b83d9e-e09f-4bc8-a6bb-21b232ea058b/174939a2-0ac8-405f-b0ef-b34429c2bac3.ism/manifest(format=m3u8-aapl)

DASH: https://gnmservicerecording-usea.streaming.media.azure.net/f1b83d9e-e09f-4bc8-a6bb-21b232ea058b/174939a2-0ac8-405f-b0ef-b34429c2bac3.ism/manifest(format=mpd-time-csf)

smoothstreaming: https://gnmservicerecording-usea.streaming.media.azure.net/f1b83d9e-e09f-4bc8-a6bb-21b232ea058b/174939a2-0ac8-405f-b0ef-b34429c2bac3.ism/manifest

None of them are working and I'm getting this error

I have also added the script tag before the head in the index.html. If I use the smoothStreaming url in this link I can see that the format it is supported https://ampdemo.azureedge.net/?url=https%3A%2F%2Fgnmservicerecording-usea.streaming.media.azure.net%2Ff1b83d9e-e09f-4bc8-a6bb-21b232ea058b%2F174939a2-0ac8-405f-b0ef-b34429c2bac3.ism%2Fmanifest

Any advice or help will be much appreciated.

Im trying to play .hls video on a flutter web project. It is working on every other browser except for safari on iOS. Only audio is being played, while the video player displays nothing. Seems like this issue. Are there any workarounds to make it work?

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel unknown, 3.0.5, on Ubuntu 22.04 LTS 5.15.0-1020-aws, locale en_US.UTF-8) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [☠] Linux toolchain - develop for Linux desktop (the doctor check crashed) ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues. ✗ ProcessException: Failed to find "pkg-config" in the search path. Command: pkg-config [!] Android Studio (not installed) [✓] Connected device (1 available) [✓] HTTP Host Availability

Tried with video_player_web_hls 0.1.11+4

i cannot use full screen on web

Height of Platform View type: [videoPlayer-1] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [videoPlayer-1] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.

some times reported

I try Safari and Firefox and both perform well but Chrome is slow it takes around 8 second to start. you can see it on video.

https://www.youtube.com/watch?v=AAQK2J0WoZ4

Is there any solution?

Videos do not play on either Safari on Mac, or Safari/Chrome on iOS.

There is some discussion of the issue in the hls.js readme.

Any thoughts on how to work around those issues with this plugin?

version: 0.1.5

I'm trying to pass the headers when playing m3u8 videos. Unfortunately, it isn't working somehow. Please refer to the screenshots.

My Code being

 _videoPlayerController =
              VideoPlayerController.network(videoUrl, httpHeaders: {
        'Cookie': "Cookies dummy string",
        'useCookie': "true",
        'useCookies': "true",
      })

Sometimes, especially on slow connections(manipulated from network panel on developer tools), the VideoPlayerController loses its state, the video plays, but its state cannot be controlled. If I use VideoProgressIndicator it falls into busy mode and if I try to pause and play the video then it starts from beginning. If I use Chewie it shows a white warning icon. The console output shows ''No further diagnostic information can be determined or provided"