iOS10でYouTube動画のインライン再生してみました。
iOS10からスマホ端末でも動画をインライン再生できるようになりましたので、YouTube iframe APIを利用してYouTubeをインライン再生するスクリプトを書いてみました。
結論から言うと、YouTubeAPIのプレイヤーパラメータにあるplaysinlineを1に設定し、無音で再生させるとできます！！
ただそのまま再生してしまうと下位OSのときにローディング状態のまま進まなくなってしまう(クリックすれば再生される)ので、
内部でiOS10以上かどうかの判定を行い、下位ブラウザの際は、再生しないように設定する必要があります。
下記が簡単なコードになります。
表示したい箇所のid名と、YouTube動画のid、プレイヤーパラメータを渡すクラスです。(※ES6)
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
class ytPlayer{ /** * [constructor description] * @param {[string]} o [element id ] * @param {[string]} videoId [youtube video id] * @param {[object]} playerVars [youtube playervars object] * @return {[type]} [set initialize] */ constructor(o, videoId, playerVars) { this.o = o; this.playerVars = playerVars; this.videoId = videoId; this.isPlaysInline = this.checkIsPlaysInline(); this.overridePlVars(); } /** * [initialize YouTube APIを読み込んで、プレイヤーを読み込ませる。] * @param {[string]} o [target element] * @return {[func]} [call loadPlayer] */ initialize(o){ if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { window.onYouTubePlayerAPIReady = ()=> { this.loadPlayer(o); }; let script = document.createElement('script'); let prior = document.getElementsByTagName('script')[0]; script.src = "//www.youtube.com/player_api"; prior.parentNode.insertBefore(script, prior); } else { this.loadPlayer(o); } } overridePlVars(){ if(this.playerVars.playsinline != null && !this.isPlaysInline){ this.playerVars.playsinline = 0; } return; } /** * [loadPlayer 動画を再生させる] * @param {[string]} o [target element] * @return {[func]} [play video] */ loadPlayer(o){ window.myPlayer = new YT.Player(o, { playerVars: this.playerVars, videoId: this.videoId, events: { 'onReady': (this.playerVars.playsinline === 1) ? onPlayerReady : false, } }); function onPlayerReady(e){ e.target.mute(); e.target.playVideo(); }; } /** * [checkIsPlaysInline インライン再生可能かどうか判定] * @return {[boolean]} [boolean] */ checkIsPlaysInline(){ let ua = navigator.userAgent, _ver = null, _isInline = false; if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 && ua.indexOf('Mobile') > 0){ _ver =detectIOS("iphone"); _isInline = (_ver >= 10)? true : false; }else if(ua.indexOf('iPad') > 0) { _ver =detectIOS("iPad"); _isInline = (_ver >= 10)? true : false; }else if( ua.indexOf('Android') > 0){ _ver = detectChromeVersion(); _isInline = (_ver >= 53)? true : false; }else{ _isInline = true; } return _isInline; /* iOSのver判定 */ function detectIOS(device){ let _ua = navigator.userAgent.toLowerCase(), version = ""; switch(device){ case "iphone" : version = _ua.match(/iphone os ([\d]+)_([\d]+)_([\d]+)/); if(!version){ version = _ua.match(/iphone os ([\d]+)_([\d]+)/); } return version[1];; break; case "iPad" : version = _ua.match(/cpu os ([\d]+)_([\d]+)_([\d]+)/); if(!version){ version = _ua.match(/cpu os ([\d]+)_([\d]+)/); } return version[1]; break; } } /* chromeのver判定 */ function detectChromeVersion(){ let raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); return raw ? parseInt(raw[2], 10) : false; } } } document.addEventListener("DOMContentLoaded", ()=>{ let vId = "ZCCifYcFBWk", elem = "mv", plVars = { rel: 0, showinfo: 0, controls: 1, loop: 1, playlist: vId, autoplay: 1, playsinline: 1, }; const yt = new ytPlayer(elem, vId, plVars); yt.initialize(elem); })； |
簡単なコードの説明
checkIsPlaysInline関数で、ユーザーエージェントを取得しインライン再生に対応しているかどうか判定しています。
iOS10以上もしくは、Chrome for Androidのバージョンが53以上の場合、インライン再生に対応しているのでその際、trueを返すようにしています。
またoverridePlVars関数で、インライン再生対応していない場合プレイヤーパラメータを上書きするように設定しています。(playsinlineを0にします)
initialize関数を呼び出した際にYouTube APIの読み込みが開始し、読み込み後プレイヤーパラメータのplaysinlineが1の場合のみインライン再生されます。
注意点としてはスマホの場合音があると再生されなくなってしまうため、再生前にmuteに設定する必要があります。(loadPlayer関数でやっています)
上記のスクリプトを実行した結果(左がiOS9 右がiOS10の時)
iOS10の場合自動再生され、それ以外の場合は今まで通り読み込みだけしています。
インライン再生が可能になったおかげで、スマホでも背景動画を流しっぱなしにしたり、
動画を再生させながら上に色々載せたりして演出もできそうですね。
ぜひ使ってみて下さい！
