Воспроизведение видео в веб-приложении Flutter
Чтобы воспроизводить видео на iOS или Android с помощью Flutter, большинство людей обратятся к пакету video_player.
К сожалению, этот пакет еще не полностью поддерживается на веб-платформе.
До 10 декабря 2019 года метод, представленный в этой статье, был одним из немногих способов воспроизведения видео в веб-приложении Flutter. На Flutter Interact 2019 веб-поддержка нескольких пакетов, включая пакет video_player_web. Представленные ниже варианты по-прежнему работают и могут быть лучше в вашем случае использования.
Мы рассмотрим решение, которое позволит нам воспроизводить видео за 3 простых шага:
1. Нам необходимо отредактировать файл шаблона index.html по умолчанию, который находится в папке web. С этими изменениями мы загружаем Видеопроигрыватель Afterglow Video Player и устанавливаем триггер, HTML-элемент a и HTML-элемент видео, который будет действовать как заполнитель для видео, которое мы хотим воспроизвести.
Вот как будет выглядеть наш index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Video Player</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
<a id="triggerVideoPlayer" class="afterglow" href="#videoPlayer"></a>
<video id="videoPlayer" width="960" height="540" data-skin="dark">
</video>
</body>
</html>
2. Затем мы пишем функцию Dart с именем playVideo, которая будет взаимодействовать со страницей index.html, используя пакет universal_html, и передавать URL-адрес видео, которое мы хотим воспроизвести:
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;
void playVideo(String atUrl) {
if(kIsWeb) {
final v = html.window.document.getElementById('videoPlayer');
if(v != null) {
v.setInnerHtml(
'<source type="video/mp4" src="$atUrl">',
validator: html.NodeValidatorBuilder()
..allowElement('source', attributes: ['src', 'type']));
final a = html.window.document.getElementById( 'triggerVideoPlayer' );
if(a != null) {
a.dispatchEvent(html.MouseEvent('click'));
}
}
} else {
// we're not on the web platform
// and should use the video_player package
}
}
Код берет ссылку на элемент videoPlayer и, если он существует, устанавливает свой внутренний HTML-код для размещения URL-адреса видео, который мы передали с помощью параметра atUrl. Затем мы получаем ссылку на элемент triggerVideoPlayer и запускаем щелчок мышью.
3. Видео будет воспроизводиться как наложение поверх всего приложения Flutter. Плеер реагирует и предлагает элементы управления для воспроизведения, паузы, громкости, прокрутки, полноэкранного режима , а также показывает информацию о воспроизведении.
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');
Если вам нужно воспроизводить видео в портретной (или в портретной ориентации), вы можете поменять местами ширину на высоту на шаге 1 или сделать это динамически. это путем изменения функции playVideo.
Плеер Afterglow можно дополнительно настроить. Он также может воспроизводить видео YouTube или Vimeo, просто отправив идентификатор видео в качестве параметра немного измененному методу на шаге 2.
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;
void playHostedVideo(String withId, [bool isVimeo=false]) {
if(kIsWeb) {
final v = html.window.document.getElementById('videoPlayer');
if(v != null) {
if(isVimeo) {
v.setAttribute("data-vimeo-id", withId);
} else {
v.setAttribute("data-youtube-id", withId);
}
final a = html.window.document.getElementById( 'triggerVideoPlayer' );
if(a != null) {
a.dispatchEvent(html.MouseEvent('click'));
}
}
} else {
// we're not on the web platform
// and should use the video_player package
}
}
И шаг 3 становится:
// for playing YouTube video
playHostedVideo('aqz-KE-bpKQ');
// or for playing Vimeo video
playHostedVideo('1084537', true);
В качестве нижнего примечания, любой видеоплеер HTML / JS можно использовать таким образом. Я выбрал Afterglow после того, как использовал его в недавнем проекте, и мне понравилась его простота и тот факт, что он легкий.
Если вас интересует воспроизведение только аудио, вы можете проверить это:
Это все!
