アプリのモバイル向けに最適化されたランディング ページを構築しています。モバイルで YouTube 埋め込みコードの特定の動作を取得しようとしています。動画は、動画の特定の時間に開始および終了する必要があります。
埋め込みコードは次のとおりです。
<iframe id="player" type="text/html" width="100%" height="100%"
src="http://www.youtube.com/embed/[ID]?html5=1&enablejsapi=1&showinfo=0&modestbranding=0&controls=0&rel=0&start=10&end=20&loop=1"
frameborder="0"></iframe>
また、コードからオブジェクトを作成して、js API で埋め込みビデオを処理できるようにしています。また、念のために同じパラメーターを渡しています。(iFrame html は、onYouTubeIframeAPIReady 関数が呼び出されるときにテンプレートとして作成されます。
function onYouTubeIframeAPIReady() {
var youtubeTemplate = $("#youtubeTemplate").html();
$('#thumbnail-inner').html(_.template(youtubeTemplate, {
//Params
}));
youtubePlayer = new YT.Player('player', {
height: '100%',
width: '100%',
enablejsapi: 1,
events: {
'onReady' : onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError
},
rel: 0,
playerVars: {
modestBranding: 1,
showinfo: 0,
html5: 1,
controls: 0
},
loop: 1,
start: 10
});
}
iOS 7 ブラウザーおよび Android 上の Chrome では意図したとおりに動作します。ただし、Android ストック ブラウザ (HTC one でテスト済み) では、次の動作が見られます。
- ビデオは開始点からではなく、最初から始まります
- ビデオは end パラメータを認識し、再生を停止します
- Android ストック ブラウザでは、埋め込みプレーヤーは、同じデバイスの Android Chrome の埋め込みプレーヤーとは異なって見えます。ビデオが読み込まれる前は、グレーのエンボス デザインです。
開始点を機能させる方法を知っている人はいますか?
ありがとう