Воспроизвести видео в флаттер паутине

Я пытаюсь создать веб-приложение, используя недавно запущенный flutter_web, но сталкиваюсь с проблемами при воспроизведении видео внутри моего приложения. Может кто-нибудь подсказать, как воспроизвести видео в flutter_web.

  1. Я пытался создать веб-плагин для флаттер-веб, но в официальной документации flutter_web мы не можем создать плагин для интернета.
  2. Я попытался добавить тег видео и iframe в index.html, но безуспешно.
  3. Я пытался использовать VideoElement, предоставленный dart:html, но не знаю, как его использовать.
prefix1.VideoElement element = prefix1.VideoElement();
    element.height = 200;
    element.width = 200;
    element.appendHtml("""<video width = "400" controls>
  <source src = "mov_bbb.mp4" type = "video/mp4">
  <source src = "mov_bbb.ogg" type = "video/ogg">
  Your browser does not support HTML5 video.
</video>
    """);
    element.querySelector('#video');
    element.play();
5 способов использования оповещений, предупреждений, ошибок, сообщений об успехе в Bootstrap
5 способов использования оповещений, предупреждений, ошибок, сообщений об успехе в Bootstrap
Bootstrap - это популярный front-end фреймворк, который делает веб-разработку проще и быстрее. Использование Bootstrap растет по мере того, как все...
Библиотека Bootstrap
Библиотека Bootstrap
Bootstrap - это бесплатный набор инструментов для разработки веб-приложений с открытым исходным кодом, разработанный компанией Twitter. Написанный на...
HTML И VS CODE Для Веб-разработки
HTML И VS CODE Для Веб-разработки
Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...
Красиво оформленное веб-приложение для отправки HTML писем на PHP
Красиво оформленное веб-приложение для отправки HTML писем на PHP
В современный цифровой век маркетинг электронной почты играет жизненно важную роль в успехе любого бизнеса, а создание красиво оформленных HTML-писем...
Раскройте весь потенциал вашего проекта Angular с помощью экспертного знания команд Angular CLI
Раскройте весь потенциал вашего проекта Angular с помощью экспертного знания команд Angular CLI
Angular - это популярный JavaScript-фреймворк для создания веб-приложений. Одной из ключевых особенностей Angular является его мощный интерфейс...
Соскабливание и загрузка изображений Google с помощью Python
Соскабливание и загрузка изображений Google с помощью Python
Растущая распространенность веб-скрейпинга значительно расширила области его использования. Многие приложения искусственного интеллекта сегодня...
8
0
7 979
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я боролся с той же проблемой, пока не запустил пример html_platform_view из веб-репозитория флаттера. Попробуй это:

void main() {
  ui.platformViewRegistry.registerViewFactory(
    'hello-world-html', 
    (int viewId) => IFrameElement()..src = 'https://www.youtube.com/embed/tgbNymZ7vqY'
  );

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: HtmlView(viewType: 'hello-world-html'),
  ));
}

Это полный код элемента видео: gist.github.com/ziyadElon/b10579f5d80f469c4d4c22a1fe454ccd.

Ziyad 29.06.2019 12:00

Мне удалось воспроизвести видео автоматически и воспроизвести звук.

Мне нужно иметь возможность взаимодействовать с видео, например ставить на паузу, останавливать или воспроизводить.

Я надеюсь, что это поможет вам, приветствую.

ДАРТ

import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';

main() async {
  await ui.webOnlyInitializePlatform();
  VideoElement videoElement;
  videoElement = querySelector('#video');
  videoElement.src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4";
  videoElement.muted = false;
  await videoElement.play();
}

HTML

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title></title>
  <script defer src = "reproductor.dart.js" type = "application/javascript"></script>
</head>
<body>    
    <video id = "video" class = "absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
</body>
</html>
Ответ принят как подходящий

Теперь вы можете просто использовать официальный плагин video_player_web, добавив его в свой pubspec.yaml:

video_player: ^0.10.4+1
video_player_web: ^0.1.0

Затем вы можете следовать кулинарная книга видеоплеера или использовать жевательный плагин, чтобы получить приятный пользовательский интерфейс.

Интересно, может ли Chevie работать в Интернете на iphone? Я пробовал, это работает только на десктопном вебе. но не на айфоне

Martin 01.07.2020 08:57

Другие вопросы по теме