Как встроить YouTube-плеер в приложение на Flutter: пошаговое руководство от Amiga.

Перемотка видео

Решил воспользоваться тем, что у контроллера можно задавать флаг «startAt», определяющий, с какого момента видео начинает проигрываться. На основе этого сделал метод, который при попытке перематывания видео, пересоздает плеер с новой точкой старта видео.

Future changeVideoPosition({required int seconds}) async {

controllerVideo.removeListener(update);

setState(() {

isUpdate = true;

isLoading = true;

});

await Future.delayed(const Duration(milliseconds: 10));

controllerVideo = YoutubePlayerController(

initialVideoId: widget.videoId.toString(),

flags: YoutubePlayerFlags(

autoPlay: true,

hideControls: true,

showLiveFullscreenButton: false,

startAt: seconds,

),

);

setState(() {

isUpdate = false;

});

oldMoment = const Duration();

controllerVideo.addListener(update);

}

Я использовал ProgressBar, предлагаемый пакетом. И тут тоже был свой подвох с включенным флагом «autoPlay». Он тоже не желал работать, поскольку методы контроллера, которые он вызывал, были заморожены. Пришлось у этого класса дополнить метод _dragEndActions(), дописав вызов метода changeVideoPosition(), функционал которого описан в виджете самого плеера.

void _dragEndActions() {

controller.updateValue(

controller.value.copyWith(isControlsVisible: false, isDragging: false),

);

_controller.seekTo(_position, allowSeekAhead: true);

setState(() {

_touchDown = false;

});

_controller.play();

if (widget.changeVideoPosition != null) {

widget.changeVideoPosition!();

}

ProgressBar(

isExpanded: true,

colors: const ProgressBarColors(),

controller: controllerVideo,

changeVideoPosition: () {

changeVideoPosition(seconds: controllerVideo.value.position.inSeconds);

},

),

Обратил также внимание на то, что мобильное приложение YouTube пролистывало видео немного вперёд/назад, когда пользователь нажимал два раза подряд на правую/левую половину экрана во время просмотра видео. У этого плеера такой фишки не было, поэтому я её дописал.

if (!isLoading)

Row(

children: [

Expanded(

child: InkWell(

splashColor: Colors.transparent,

highlightColor: Colors.transparent,

onTap: showInterface,

onDoubleTap: () {

changeVideoPosition(seconds: controllerVideo.value.position.inSeconds - 5);

},

child: const SizedBox(height: double.infinity),

),

Expanded(

child: InkWell(

splashColor: Colors.transparent,

highlightColor: Colors.transparent,

onTap: showInterface,

onDoubleTap: () {

changeVideoPosition(seconds: controllerVideo.value.position.inSeconds + 5);

},

),

],

),

if (!isLoading)

Row(

children: [

Expanded(

child: InkWell(

splashColor: Colors.transparent,

highlightColor: Colors.transparent,

onTap: showInterface,

onDoubleTap: () {

changeVideoPosition(seconds: controllerVideo.value.position.inSeconds - 5);

},

child: const SizedBox(height: double.infinity),

),

Expanded(

child: InkWell(

splashColor: Colors.transparent,

highlightColor: Colors.transparent,

onTap: showInterface,

onDoubleTap: () {

changeVideoPosition(seconds: controllerVideo.value.position.inSeconds + 5);

},

child: const SizedBox(height: double.infinity),

),

],

),

Таким образом, я постепенно весь интерфейс видеоплеера заменил своим, спрятав старый.

Итог: получился всё тот же плеер, что и дефолтный YoutubePlayer, но с куда меньшей задержкой загрузки видео.

После эти изменения вынес в форк репозитория пакета.

Аудио быстрее видео

Но, как оказалось, счастье длилось недолго – спустя время посыпались баги. Их было много, но, тем не менее, работая через контроллер, я их исправлял, один за другим.

Однако, один баг мне так и не дался – у плеера появилась вредная привычка проигрывать аудиодорожку на пару секунд раньше, чем видео. Пытаясь решить его, упёрся в возможности пакета.

Пришлось искать альтернативный пакет, хотя свой эксперимент бросать было грустно. Покопавшись на просторах интернета, нашёл пакет pod_player. Очень смущал номер версии – 0.2.1. Однако, решил испытать. Сказать, что я был доволен результатом – это ничего не сказать.

Виджет плеера от этого пакета был крайне простой в настройке при этом работал корректно, без багов, видео грузил быстро. Поддерживал как id видео на ютубе, так и url видео в сети, а кроме того, видео в ассетах. В общем, превосходил youtube_player_flutter, даже с учётом моих оптимизационных трюков, по всем параметрам.