又到周五，一周好快~
周五无例外的等老婆下班中~ 利用这点时间记录下最近使用Video_player库遇到的问题。
问题描述： 在Flutter上使用Video_player第三方库，Android手机上播放landScapeRight方向的视频时，会倒置。其他的都没啥问题，如图：
修复前
修复后
大家也可以看看在github.com上的issue: https://github.com/flutter/flutter/issues/60327
解决方案: https://github.com/flutter/plugins/pull/3820
因为看了下最新的Video_player其实也没有解决这个问题，所以我只能自己改了发到私有pub.dev上了(看来搭个私有pub.dev是很有必要的，第三方库各种各样的问题，解决也不及时)，大家也可以修改发布到github上。
下面来介绍下怎么修改：
这边需要同时修改两个库：Video_player和video_player_platform_interface，因为video_player依赖了video_player_platform_interface这玩意。只能都改一下了。
一、先修改video_player
我是基于video_player最新版本2.1.12上修复
1.1 先修改Android原生端
路径：
video_player-2.1.12/android/src/main/java/io/flutter/plugins/videoplayer/VideoPlayer.java
在285行加上(为了将rotation传回到Flutter端)：
@SuppressWarnings("SuspiciousNameCombination")
private void sendInitialized() {
if (isInitialized) {
Map<String, Object> event = new HashMap<>();
if (exoPlayer.getVideoFormat() != null) {
...
Log.e("videoPlayer","rotationDegrees =="+rotationDegrees);
//将rotation传回到Flutter端
if(rotationDegrees == 180) {
event.put("rotation", Math.PI);
}
}
eventSink.success(event);
}
}
1.2 修改Flutter端的video_player.dart
路径：
video_player-2.1.12/lib/video_player.dart
1、在31行，VideoPlayerValue构造函数中加入this.rotation
//1、在31行
//VideoPlayerValue构造函数中加入this.rotation
VideoPlayerValue({
required this.duration,
...
this.rotation = 0.0,
this.errorDescription,
});
2、98行，定义rotation变量
//2、98行
//定义rotation变量
/// The [rotation] of the video. by hao.shi
final double rotation;
3、127行，修改copyWith()函数，为其添加rotation属性
//3、127行
//修改copyWith()函数，为其添加rotation属性
VideoPlayerValue copyWith({
Duration? duration,
...
double? rotation,
String? errorDescription,
}) {
return VideoPlayerValue(
...
rotation: rotation ?? this.rotation, //添加这行
errorDescription: errorDescription ?? this.errorDescription,
);
}
4、定位到280行，initialize函数，修改在320行 eventListener(VideoEvent event)函数中接受event传过来的rotation值
//4、定位到280行 initialize函数
// 修改在320行 eventListener(VideoEvent event)函数中
//接受event传过来的rotation值
Future<void> initialize() async {
...
void eventListener(VideoEvent event) {
switch (event.eventType) {
case VideoEventType.initialized:
value = value.copyWith(
...
rotation: event.rotation, //添加这行
isInitialized: event.duration != null,
);
break;
case VideoEventType.completed:
...
break;
}
}
...
return initializingCompleter.future;
}
5、定位到669行，在_VideoPlayerState类中build方法，修改widget，为其添加包裹旋转的widgetRotateBox
@override
Widget build(BuildContext context) {
return _textureId == VideoPlayerController.kUninitializedTextureId
? Container()
// :_videoPlayerPlatform.buildView(_textureId);
: RotatedBox(
quarterTurns: widget.controller.value.rotation == math.pi ? 2 : 0,
child: _videoPlayerPlatform.buildView(_textureId),
);
}
到此，在Video_player库中的修改就结束了，其实也就是将视频的rotation从Android端传回到Flutter端，然后在显示video的时候根据rotation进行一下旋转就可以解决了。
二、还需修改下video_player_platform_interface库
video_player_platform_interface是基于4.1.0修改，其实就是添加个rotation属性，没啥难的。
2.1 先修改下method_channel_video_player.dart
路径：
video_player_platform_interface-4.1.0/lib/method_channel_video_player.dart
定位到111行，在videoEventsFor(int textureId)方法中添加接受rotation参数
@override
Stream<VideoEvent> videoEventsFor(int textureId) {
...
switch (map['event']) {
case 'initialized':
return VideoEvent(
...
rotation: map['rotation']?.toDouble() ?? 0.0//添加此行
);
...
}
});
}
2.2 再修改下video_player_platform_interface.dart
路径：
video_player_platform_interface-4.1.0/lib/video_player_platform_interface.dart
定位到224行，为VideoEvent类添加rotation参数
//VideoEvent构造函数中添加rotation
VideoEvent({
required this.eventType,
this.duration,
this.size,
this.rotation,
this.buffered,
});
//定义rotation
/// Rotation of the video.
/// Only used if [eventType] is [VideoEventType.initialized].
final double? rotation;
三、在video_player中引用修改后的video_player_platform_interface
记得修改下video_player对video_player_platform_interface.dart的引用，如果不改成你修改后的，那么rotation你还是获取不到哦。
video_player/pubspec.yaml
video_player_platform_interface:
hosted:
name: video_player_platform_interface
url: http://私有pub.dev链接:port
version: ^4.1.0
网友评论