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

2020/11/28

WRITER

ロッキーカナイ

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

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をヒントに実装しました。

// dart
import 'dart:html';
import 'dart:ui' as ui;

// flutter
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

// third party
import 'package:video_player/video_player.dart';

...

@override
Widget build(BuildContext context) {
    if (kIsWeb) {
      // ignore:undefined_prefixed_name
      ui.platformViewRegistry.registerViewFactory(
        'video-area',
        (int viewId) => VideoElement()
          ..src = "Movie URL"
          ..style.border = "none"
          ..style.outline = "none"
          ..style.backgroundColor = "black"
          ..attributes["playsinline"] = ""
          ..controls = true,
      );

      return Container(
        width: 330,
        height: 200,
        child: HtmlElementView(viewType: 'video-area'),
      );
    } else {
      // スマホアプリ用処理 video_playerで動画再生
      ...
    }
}

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で気になった事があれば、随時記事にしたいと思います。