【Flutter】youtube playerの埋め込み動画が表示されない解決法

前提

YoutubeをFlutterアプリ内に埋め込むために、以下のパッケージを使用。

final youtubePlayerController = YoutubePlayerController.fromVideoId(
  videoId: youtubeVideoId,
  autoPlay: true,
  startSeconds: 10,
  params: YoutubePlayerParams(
    enableCaption: false,
    showControls: false,
    mute: isMuted.value,
    loop: false,
    enableJavaScript: true,
    showFullscreenButton: true,
    showVideoAnnotations: false,
  ),
);
      
YoutubePlayer(
  controller: youtubePlayerController,
  aspectRatio: 16 / 9,
),

一部のYoutube動画埋め込みが表示されないバグ？

実際に、Youtubeの動画IDを入れて動画が表示されるかを確認してみると、表示される動画もあれば表示されない動画もあることに気づきました。

表示されていない動画は、以下のようなエラーが出ています。

「エラーが発生しました。しばらくしてからもう一度お試しください。」

【原因】パッケージの既知バグで動画idにハイフンが含まれているとエラーになる

色々と調べてissueを漁ったところ、以下の説が有力でした。

https://github.com/sarbagyastha/youtube_player_flutter/issues/1060

このバグは、JavaScriptコードでvideoIdを変数として使用しているために発生します。そのため、idにハイフンが含まれていると、コードが壊れて実行されなくなります。

これは重大な間違いです。多くの問題があったのも当然です。ハイフンを含むすべてのビデオIDが問題を引き起こすのは事実です。

パッケージ自体、Youtubeの埋め込みにwebivewが使用されている関係で、JavaScriptの影響を受けているんですね。

【解決方法】idなしでコントローラーを初期化後にloadVideoByIdで動的に読み込む

解決方法としては、ビデオIDなしでコントローラーを初期化し、loadVideoById(...) を使用してビデオIDを後から動的に読み込むことで表示されました。

final youtubePlayerController = YoutubePlayerController(
  params: const YoutubePlayerParams(
    enableCaption: false,
    showControls: true,
    mute: false,
    loop: false,
    enableJavaScript: true,
    showFullscreenButton: true,
    showVideoAnnotations: false,
  ),
);

await youtubePlayerController!.loadVideoById(
  videoId: youtubeVideoId,
);
      
YoutubePlayer(
  controller: youtubePlayerController,
  aspectRatio: 16 / 9,
),

割とホットなバグな気がしますが、まだ修正はされていないみたいです。

今後の修正に期待したい気持ちはありますが、しばらくは修正されなさそう。。。

とはいえ、Youtube埋め込み系のパッケージを色々と調査してみた限り、本記事で紹介しているyoutube_player_iframeが一番良さそうなので、このバグは目を瞑るしかなさそうです。