YouTube動画再生をコントロールしたい。というわけで、YouTube APIを勉強開始。PCではOKなのに、iOSだとうまくいかないということが発生。いろいろむずかしい。
なんでも、2つの方法があるとか。YouTube JavaScript Player APIとYouTube iFrame API。前者はFlashを使ったもので、SWFObjectを使う。Flashなので、iOSでは使用できないの。ということで、後者を使うんだそうだ。
YouTube JavaScript Player API｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room
YouTube iFrame Player API｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room
自動再生開始は不可
で、後者を使ってテストを始める。上記サイトのコードをそのまま使っていろいろ。PCでは問題なく動く。しかし、iOSのSafariではうまくいかない。全部がだめというわけではない。一部のコードが動かない。理由がわからない。で、検索。こんなのが見つかる。
[JS] Youtubeをサイト内で再生させるYoutube APIの使い方。スマホにも対応させる。 – YoheiM .NET
そこにはこうあった。
さてiPhoneやAndroidでは、上記の実装では再生できません（出来ない可能性が高いです）。
iPhoneなどの場合、OS側で自動再生が禁止されていて、 動画読み込み完了時に勝手に「event.target.playVideo()」を呼び出しても再生されない為です（自分の環境では勝手にevent.target.playVideo()を呼び出すと、その後どうやっても再生できなくなってしまいました）。
解決策としては、ユーザーが自分の行動で（タップして）、再生させることで解決します。
自動再生がうまくいかない模様。というか、自動再生を一度やってしまうと、再生が始まらないばかりか、それ以降はどうやっても再生ができないようだ。
自動再生開始は、ページのロードと同時に再生を開始する、というのだけでなく、リンクのクリックで再生を開始するようなコードも不可のようだ。むむ。
逆に、一度、プレイヤー部分のタップで再生を開始してしまえば、それ以降の操作で自動再生させる（リンクのクリックで動画を切り替えるとか）ようにしてもOKのようだ。
ということで、プレイヤー部のタップで再生を開始したらフラグを立てる、それまではJavaScriptによる再生コントロールをしない、という手法で対処することに。これを思いつくまで、かなりの時間をかけてしまった。
同時再生も不可
ここまでうまくいけば、準備OK。完璧！ とか思ったのだけど、もう1つ問題があった。
iOSのSafariでは複数の動画の同時再生ができないのだった。ページ内に2つの動画を配置（A、Bとする）。Aを再生した状態で、Bを再生しようとすると、Aの再生が止まってしまう。
どうやっても2つの動画を同時に再生できないようだ。
がーん。
処理速度の問題から禁止されているのだろうか？ 理由まではわからないけど、そんな感じ。でもって、それはそれで仕方ないような気もする。
また、2つの動画が1ページ内にある場合、別の困ったことも。より詳しく見ていくと、Aの再生中にBを再生すると、Bの再生が始まらないという問題。Bはもうどうやっても再生できない。
いったんAを一時停止してからだとBの再生は可能（その時、Aは一時停止する）。A/Bが逆であっても同様。
でもって、Aを一時停止、Bを再生。それはOK。その後、B再生中にAを再生すると、Bは一時停止し、Aの再生はOK。さらにBの再生開始もOK（Aは一時停止になる）。
という感じで、初回のみ一方を一時停止してからでないと、他方の再生は不可。
これはiOSのSafariでのみの問題。じゃあ、iOSのChromeはどうかというと、このような問題はまったく起こらない。Aを再生中にBを再生開始は、初回でもOKなのだ（他方が一時停止になるのは変わらないのだけど）。
むー。むずかしい。
それでも、多少は目的の動作には近づけたので、これでよしとする。あとは、サンプルをアップして意見を聞いてみることにしよう。うまい対処方法をだれかが教えてくれることも期待しつつ。
コメント