開発

【Flutter Web】video_player iOS Safariで動作再生できない件

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

最近Flutter Webを始めてみました。

ですので、アイキャッチ画像も新しくなってます(「Web」が追加されてますw)

Flutter Webを始めて早々に、iOS Safariで動画再生ができない問題がありました。おそらく同じような問題に局面しているしている方もいると思うので、対応策として行った内容を紹介します。

※2020/11/27時点の内容です。最新バージョンでは改善している可能性もありますので、ご確認ください。

環境は、Flutter Channel beta, 1.23.0-18.1.pre、video_player: 1.0.1 です。

Flutter Web

まずFlutter Webは、

すばらしい!!

詳しくはこちらを・・。

申し訳ない。

 

Flutter Web video_playerプラグインで動作再生がiOS Safariのみ行えない

video_playerは、iOS/Android/Webに対応した動画や音楽を再生できるプラグインです。Widgetとして扱えるので、使い勝手もよく、カスタマイズ性も高く、google製で、例えるなら高身長、高学歴、高収入。

最近までは、Flutter Webではサポートしておらず、video_player_webというプラグイン をセットで入れる事で動作しましたが、最新バージョンでは、video_player単品でサポートされました。

そんな3高のvideo_player君ですが、iOSのSafariでは、動画再生されない問題があります。

現象としては、video_player君がサーバーに画像くれよとrange requestを投げるのですが、2回目の取得でこけているようです。

調査したところ、Githubで該当の問題が上がってました。この中で言われている現象同様です。

こちらの問題のやり取りを抜粋します。

commented 19 days ago

Any solution for this? It’s very important to support web mobile for this plugin

—–

commented 19 days ago

A proper fix in the plugin would still be welcome but I think a Mac is probably necessary to debug/fix the problem and I don’t have that.

—–

commented 17 days ago

I have a requirement where I need control over the video and show overlay and add music on my video. I am not able to play in iPhone safari.

—–

commented 6 days ago

I have the same problem ! dose any one find solution for this issue ?

英語は気合で翻訳する私ですので、だいたい、「まだっすか?」的な事だと思います。

去年からOpenのままなで、いつに対応されるかもわからないので、video_playerを使わずで対応策を練る必要があるってことです。

ヒントになった記事たち

Flutter Web Video Player Alternative

オーバーレイで動画を再生させる方法が紹介されております。記事の内容的には、「そもそもindex.html経由で表示させてるんだからここにvideoタグ仕込んで使う時呼び出せばいんじゃね」的なものだと思います。気合の翻訳なので、もちろん真意は不明ですが。

flutter/flutter_web

flutter_webのソースコードにヒントはありました。この例はYoutube動画をiFrameで読み込んでいます。ちなみにdart:htmlとdart:uiをインポートのみなのでdartで完結できる気配。

 

iOS Safariでも再生できるようにした方法

今回は、widgetとして表示したいというのと、どっかのサーバー上にあるmp4をダウンロードし表示したかったので、flutter_webをヒントに実装しました。

 

IFrameElementをVideoElementに変更します。

VideoElementのsrcにmp4等の動画URLを指定します。

HtmlElementView初期化時にviewTypeの引数にVideoElementで指定した’video-area’を渡します。最後にコンテナで囲いwidthとheightを指定すれば完成です。

これで、iOS Safariでも動画再生できるようになりました。

 

2020/12/2更新

attributes属性にplaysinlineを追加する事で、インラインで再生されます。

 

ちなみにplatformViewRegistryはリファレンスエラーになるのですが、無視してよい様です。参考元はこちら

You will have an error for ui.platformViewRegistry but it is fine. You can ignore it by adding // ignore: undefined_prefixed_name on the line above

ただし該当コードの上行に、// ignore:undefined_prefixed_nameを追加してください。

 

dart:htmlについては、以下のサイトが参考になりましたので記載しておきます。楽しそうです。

 

Flutter Webで気になった事があれば、随時記事にしたいと思います。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。