Home > Html & Css > videoタグとyoutubeをios10(iphone5)以降で自動再生させる
Home > Javascript > videoタグとyoutubeをios10(iphone5)以降で自動再生させる

videoタグとyoutubeをios10(iphone5)以降で自動再生させる

公開日:

最終更新日:

video-yotube

結構なやんだので、メモがてら書き留めておきます。
ちなみに下記方法でも、iphoneが低電力モードになってたら自動再生しないようです。
電池が減った状態(バッテリー黄色)だと自動再生されないようになるらしいのでご注意ください。
これで、端末によって再生されたり、されなかったりで、大分悩みました。。。

videoタグでの自動再生とループ

普通のvideoタグでの自動再生です。

Html

まず、autoplayとloopでpcでは自動再生してloopします。
それに、mutedを付けてやるとandroidでは再生します(端末によっては再生しないのもあるかも)。
iphoneにはplaysinlineを付けてやると再生します。
もし、それでもダメだったら、webkit-playsinlineを付けてやってください。

youtubeの自動再生とループ

youtubeでのやり方です

html

youtube入れたい所に下記を記載ください。

javascript

iframe player apiです。
youtubeを読み込んでmuteで自動再生してます。function onPlayerReady のとこですね。
ここで大事なのが、playerVarsのとこの ‘playsinline’: 1 です。なんかさっき出てきたやつですね。
それで function onPlayerStateChangeの所で、止まったら、再生ってやってるので自動再生になります。

Comment

よろしければコメントをどうぞ