videoタグとyoutubeをios10(iphone5)以降で自動再生させる
結構なやんだので、メモがてら書き留めておきます。
ちなみに下記方法でも、iphoneが低電力モードになってたら自動再生しないようです。
電池が減った状態(バッテリー黄色)だと自動再生されないようになるらしいのでご注意ください。
これで、端末によって再生されたり、されなかったりで、大分悩みました。。。
videoタグでの自動再生とループ
普通のvideoタグでの自動再生です。
Html
まず、autoplayとloopでpcでは自動再生してloopします。
それに、mutedを付けてやるとandroidでは再生します(端末によっては再生しないのもあるかも)。
iphoneにはplaysinlineを付けてやると再生します。
もし、それでもダメだったら、webkit-playsinlineを付けてやってください。
1 2 3 4 5 |
<video class="video" playsinline="" webkit-playsinline="" autoplay="" muted="" loop=""> <source src="動画のurl"> </video> |
youtubeの自動再生とループ
youtubeでのやり方です
html
youtube入れたい所に下記を記載ください。
1 2 3 |
<div id="ytplayer"></div> |
javascript
iframe player apiです。
youtubeを読み込んでmuteで自動再生してます。function onPlayerReady のとこですね。
ここで大事なのが、playerVarsのとこの ‘playsinline’: 1 です。なんかさっき出てきたやつですね。
それで function onPlayerStateChangeの所で、止まったら、再生ってやってるので自動再生になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('ytplayer', { height: '360', width: '640', videoId: 'ここはyoutubeのid', playerVars: { 'rel': '0', 'showinfo': '0', 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { event.target.playVideo(); event.target.mute(); } var done = false; function onPlayerStateChange(event) { if (event.target.getPlayerState() == YT.PlayerState.ENDED) { event.target.playVideo(); } } function stopVideo() { player.stopVideo(); } |
よろしければコメントをどうぞ