iOS10の端末でYouTube動画をインライン再生させる方法(コード有り)

iOS10でYouTube動画のインライン再生してみました。

 

iOS10からスマホ端末でも動画をインライン再生できるようになりましたので、YouTube iframe APIを利用してYouTubeをインライン再生するスクリプトを書いてみました。

結論から言うと、YouTubeAPIのプレイヤーパラメータにあるplaysinlineを1に設定し、無音で再生させるとできます!!

ただそのまま再生してしまうと下位OSのときにローディング状態のまま進まなくなってしまう(クリックすれば再生される)ので、

内部でiOS10以上かどうかの判定を行い、下位ブラウザの際は、再生しないように設定する必要があります。

下記が簡単なコードになります。

表示したい箇所のid名と、YouTube動画のid、プレイヤーパラメータを渡すクラスです。(※ES6)

簡単なコードの説明

checkIsPlaysInline関数で、ユーザーエージェントを取得しインライン再生に対応しているかどうか判定しています。

iOS10以上もしくは、Chrome for Androidのバージョンが53以上の場合、インライン再生に対応しているのでその際、trueを返すようにしています。

またoverridePlVars関数で、インライン再生対応していない場合プレイヤーパラメータを上書きするように設定しています。(playsinlineを0にします)

initialize関数を呼び出した際にYouTube APIの読み込みが開始し、読み込み後プレイヤーパラメータのplaysinlineが1の場合のみインライン再生されます。

注意点としてはスマホの場合音があると再生されなくなってしまうため、再生前にmuteに設定する必要があります。(loadPlayer関数でやっています)

 

上記のスクリプトを実行した結果(左がiOS9 右がiOS10の時)

inlineImage

iOS10の場合自動再生され、それ以外の場合は今まで通り読み込みだけしています。

インライン再生が可能になったおかげで、スマホでも背景動画を流しっぱなしにしたり、

動画を再生させながら上に色々載せたりして演出もできそうですね。

ぜひ使ってみて下さい!

●この記事を書いた人