« GibsonがCakewalkを買収 | トップページ | Sticky iTunes Link Makerのリンクシェア対応を終了、PHG専用へ »

2013年10月 1日 (火曜日)

YouTube APIとiOSのSafariで困る話

 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

自動再生開始は不可

Youtubebuffering

 で、後者を使ってテストを始める。上記サイトのコードをそのまま使っていろいろ。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なのだ(他方が一時停止になるのは変わらないのだけど)。

 むー。むずかしい。

  それでも、多少は目的の動作には近づけたので、これでよしとする。あとは、サンプルをアップして意見を聞いてみることにしよう。うまい対処方法をだれかが教えてくれることも期待しつつ。


|

« GibsonがCakewalkを買収 | トップページ | Sticky iTunes Link Makerのリンクシェア対応を終了、PHG専用へ »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/58299703

この記事へのトラックバック一覧です: YouTube APIとiOSのSafariで困る話:

« GibsonがCakewalkを買収 | トップページ | Sticky iTunes Link Makerのリンクシェア対応を終了、PHG専用へ »