abdelaziz-mahdy / flutter_meedu_videoplayer

Cross-Platform Video Player for flutter
https://abdelaziz-mahdy.github.io/flutter_meedu_videoplayer/
MIT License
132 stars 69 forks source link

How can I adjust the position where the subtitles are displayed? #101

Closed Carseason closed 1 year ago

Carseason commented 1 year ago
fits :[
BoxFit.fitWidth
]

Subtitles seem to be forever at the bottom of the phone

abdelaziz-mahdy commented 1 year ago

Will check if I can make you pass the subtitles location

abdelaziz-mahdy commented 1 year ago

Will add in next Dev release the ability to change it position, also will make the default to be in a better location

Carseason commented 1 year ago

You are amazing! !

abdelaziz-mahdy commented 1 year ago

fixed on 4.2.11-dev-3 please check and reopen it there is any other problem

Carseason commented 1 year ago

Wrong splash screen when opening a video Failed to get the duration when the video is playing The subtitle is not positioned according to the canvas, but according to the screen

abdelaziz-mahdy commented 1 year ago

Wrong splash screen when opening a video Failed to get the duration when the video is playing

one by one ? i dont get those two, can you explain more?

The subtitle is not positioned according to the canvas, but according to the screen

for this you can adjust the value to your liking, and what do you mean by canvas?

Carseason commented 1 year ago
image

Subtitles should be positioned according to the red frame, not the screen

Carseason commented 1 year ago

Dragging the progress bar will end the video directly

  flutter_meedu_videoplayer: ^4.2.11-dev-3
  media_kit_libs_ios_video: ^1.0.4
  media_kit_libs_android_video: ^1.0.3
abdelaziz-mahdy commented 1 year ago
image

Subtitles should be positioned according to the red frame, not the screen

Oh that's a good idea, I will try to implement it (can't promise I can)

abdelaziz-mahdy commented 1 year ago

Dragging the progress bar will end the video directly

  flutter_meedu_videoplayer: ^4.2.11-dev-3
  media_kit_libs_ios_video: ^1.0.4
  media_kit_libs_android_video: ^1.0.3

That's weird can you test on latest one dev 4

And let me know on which platform does that happen?

Carseason commented 1 year ago
  flutter_meedu_videoplayer: ^4.2.11-dev-4
  media_kit_libs_ios_video: ^1.0.4
  media_kit_libs_android_video: ^1.0.3

I am developing on the ios simulator:

QQ20230603-011008-HD

abdelaziz-mahdy commented 1 year ago

Can you show your main function?

Like are you using media_kit or not

And does that happen in my example app?

And if you can provide a simple example where that happens it would be appreciated

Carseason commented 1 year ago

I'll create a demo when I'm free

abdelaziz-mahdy commented 1 year ago

I'll create a demo when I'm free

If you share your current code that will be good too,

I am just trying to find where it happens and why, since it didn't happen for me

Carseason commented 1 year ago

player.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_meedu_videoplayer/meedu_player.dart';
import 'package:istoreos/router/index.dart' as router;
import 'package:wakelock/wakelock.dart';
import 'package:path/path.dart' as path;
import 'package:http/http.dart' as http;

class Player extends StatefulWidget {
  String url;
  String? cookie;
  Player({super.key, required this.url, this.cookie});

  @override
  State<Player> createState() => _PlayerState();
}

class _PlayerState extends State<Player> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  MeeduPlayerController pl = MeeduPlayerController(
    // controlsStyle: ControlsStyle.secondary,
    fits: [
      //   根据宽度拉伸
      BoxFit.fitWidth,
      // 尽可能最大
      BoxFit.contain,
      //   裁剪
      BoxFit.cover,
      //   拉伸满屏
      BoxFit.fill,
      //   根据高度拉伸
      BoxFit.fitHeight,
      //   根据宽度拉伸
      BoxFit.fitWidth,
      //   居中
      BoxFit.scaleDown,
    ],
    responsive: Responsive(
      maxButtonsSize: 42,
    ),
  );

  String get fileName {
    return path.basename(widget.url);
  }

  String get getSubtitleUrl {
    final url = widget.url;
    final extension = path.extension(url);
    return url.replaceFirst(extension, ".srt");
  }

  // 加载字幕
  Future<String?> getSubtitle() async {
    String? content;
    final uri = Uri.parse(getSubtitleUrl);
    final resp = await http.get(uri, headers: {
      HttpHeaders.cookieHeader: widget.cookie ?? "",
    });
    if (resp.statusCode == 200) {
      try {
        //   utf8
        content = String.fromCharCodes(resp.bodyBytes.buffer.asUint8List());
      } catch (e) {}
      try {
        // utf16
        content = String.fromCharCodes(resp.bodyBytes.buffer.asUint16List());
      } catch (e) {}
    }
    return content;
  }

  void getData() async {
    pl.header = Container(
      padding: const EdgeInsets.only(
        top: 50,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconButton(
            icon: const Icon(
              Icons.arrow_back_ios,
              size: 22,
              color: Color.fromARGB(151, 255, 255, 255),
            ),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          Expanded(
            child: Text(
              fileName,
              style: const TextStyle(
                overflow: TextOverflow.ellipsis,
                color: Color.fromARGB(151, 255, 255, 255),
                fontSize: 18,
              ),
            ),
          ),
          Container(),
        ],
      ),
    );
    Future<ClosedCaptionFile>? closedCaptionFile;
    closedCaptionFile = Future(() async {
      try {
        final val = await getSubtitle();
        if (val != null) {
          return SubRipCaptionFile(val);
        }
      } catch (e) {}
      return SubRipCaptionFile("");
    });
    Wakelock.enable();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      pl.setDataSource(
        DataSource(
          type: DataSourceType.network,
          httpHeaders: {
            HttpHeaders.cookieHeader: widget.cookie!,
          },
          source: widget.url,
          closedCaptionFile: closedCaptionFile,
        ),
        autoplay: true,
      );
      //   显示字幕
      pl.onClosedCaptionEnabled(true);
    });
    //
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    getData();
  }

  @override
  void dispose() {
    pl.dispose();
    Wakelock.disable();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: MeeduVideoPlayer(
                controller: pl,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

void showPlayer(
  BuildContext context, {
  required String url,
  String? cookie,
}) {
  Navigator.of(context).push(router.FadeRoute(
    page: Player(
      url: url,
      cookie: cookie,
    ),
  ));
}

pubspec.yaml

name: app
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: "none" # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: ">=3.0.1 <4.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get: ^4.6.5
  sqflite_common_ffi: ^2.2.5
  sqflite:
  path:
  skeleton_text: ^3.0.0
  rflutter_alert: ^2.0.6
  url_launcher: ^6.1.11
  flutter_easyloading: ^3.0.5
  flutter_inappwebview: ^6.0.0-beta.23
  intl: ^0.18.1
  package_info_plus: ^4.0.1
  path_provider: ^2.0.15
  cached_network_image: ^3.2.3
  photo_view: ^0.14.0
  # 播放器
  flutter_meedu_videoplayer: ^4.2.11-dev-4
  # 加载的ffmpeg 播放器处理
  media_kit_libs_ios_video: ^1.0.4
  media_kit_libs_android_video: ^1.0.3
  flutter_cache_manager: ^3.3.0
  # 闪屏动画
  flutter_native_splash: ^2.3.0
dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

  build_runner: ^2.3.3
  chopper_generator: ^6.0.0
  json_serializable: ^6.6.1
  swagger_dart_code_generator: ^2.11.5
  flutter_launcher_icons: ^0.13.1
  rename: ^2.1.1

# 临时依赖
dependency_overrides:
  win32: ^5.0.2

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  assets:
    - assets/images/
    - assets/icon/

^4.2.10 everything works fine

abdelaziz-mahdy commented 1 year ago

Okay, will test and let you know, it's may happened during and merging the pull request,

Will check it and let you know if it got fixed

Carseason commented 1 year ago

thanks for your work

abdelaziz-mahdy commented 1 year ago

https://github.com/zezo357/flutter_meedu_videoplayer/assets/25157308/5d03235d-5368-4f08-a149-c185ebf757b5

hello i just tested and it didnt happen to me , so are you sure your video file is correct and playing in another player correclty

and you dont have any parts of your code that does seek?

Carseason commented 1 year ago

He was fine on 4.2.10。 Exception in 4.2.11-dev-3 and 4.2.11-dev-4. It will only be abnormal when dragging the progress bar for the first time I am testing on the ios simulator.

abdelaziz-mahdy commented 1 year ago

He was fine on 4.2.10。 Exception in 4.2.11-dev-3 and 4.2.11-dev-4. It will only be abnormal when dragging the progress bar for the first time I am testing on the ios simulator.

Can you test again using 4.2.10?

Maybe it's in your code 😀

If you have the code on a repo can give me access so I can test on it

Carseason commented 1 year ago

He was fine on 4.2.10。 Exception in 4.2.11-dev-3 and 4.2.11-dev-4. It will only be abnormal when dragging the progress bar for the first time I am testing on the ios simulator.

Can you test again using 4.2.10?

Maybe it's in your code 😀

If you have the code on a repo can give me access so I can test on it

I rolled back the code to 4.2.10 perfectly fine, My project is software for local access to a router, I'll create a minimal example for you at my leisure

abdelaziz-mahdy commented 1 year ago

He was fine on 4.2.10。 Exception in 4.2.11-dev-3 and 4.2.11-dev-4. It will only be abnormal when dragging the progress bar for the first time I am testing on the ios simulator.

Can you test again using 4.2.10?

Maybe it's in your code 😀

If you have the code on a repo can give me access so I can test on it

I rolled back the code to 4.2.10 perfectly fine, My project is software for local access to a router, I'll create a minimal example for you at my leisure

Will recheck, but it should be no difference in seeking between 4.2.10 and latest

Will wait for your example maybe we can figure out the cause of the problem

Carseason commented 1 year ago

The test items are in: https://github.com/Carseason/flutter_meedu_videoplayer_test The demo video is at: https://github.com/Carseason/flutter_meedu_videoplayer_test/blob/main/test_videos/test.mp4

abdelaziz-mahdy commented 1 year ago

Thank you so much, will test again and let you know

abdelaziz-mahdy commented 1 year ago

test using 4.2.11-dev-5 is should be fixed

abdelaziz-mahdy commented 1 year ago

for the subtitles i think it cant be done, since it will conflict with the video fit feature (the canvas thing)

Carseason commented 1 year ago

4.2.11-dev-5 fixed suceess Subtitles hope there will be a plan in the future, thank you for your work