質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

2023閲覧

[Flutter]Webviewを使って背景全面に動画があるサイトを表示・再生したい

yuki666

総合スコア22

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/01/10 06:04

Flutterでアプリを作成中です。
その中で、WebViewを使って、背景全面に動画(.mp4)があるサイトを表示したいのですが、iOSだと動画の表示・再生がされません。
Androidでは背景の動画表示・再生がされました。

  • WebViewで背景全面に動画(.mp4)があるサイトの動画を表示・再生することは、iOSでは不可能なのかどうか。
  • 可能であればその方法(ソースコード等)を教えていただきたいです。

ご回答お待ちしております。
よろしくお願いいたします。

該当のソースコード

以下では、iOSでは背景全面の動画の表示・再生ができない。

dart

1WebView( 2 initialUrl: "ここに背景全面に動画があるサイトのURL", 3 javascriptMode: JavascriptMode.unrestricted, 4),

補足情報(開発環境など)

  • Flutter 3.3.2
  • webview_flutter: ^3.0.4
  • iPhone11(iOS:16.1.1)
  • Android(Pixel 6a)
  • アプリ作成・Flutter初心者

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

  • リストウェブビューで読み込んでいるサイトのVideoタグの変更
  • リストWebViewに記述を追加

上記の対応でiOSでも再生ができるようになりました。
状況によっても変わるのかもしれませんが、以下で私は解決ができました。

html

1<video autoplay muted loop playsinline> 2 <source src="ここに動画(.mp4)のURL" type="video/mp4"> 3</video>

dart

1WebView( 2 initialUrl: "ここに背景全面に動画があるサイトのURL", 3 javascriptMode: JavascriptMode.unrestricted, 4 initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow, // 追加 5 allowsInlineMediaPlayback: true, // 追加 6),

投稿2023/01/24 10:59

yuki666

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問