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

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

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

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

Dart

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

Q&A

解決済

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

yuki666
pepeke

総合スコア13

Flutter

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

Dart

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

1回答

0グッド

0クリップ

386閲覧

投稿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初心者

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答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

総合スコア13

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Flutter

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

Dart

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