iframe APIを介してプログラムで要素にビデオをロードし、モバイル(iOS 6、iOS 7、最新のAndroid)で再生できるようにする必要があります。
これがJavaScriptです:
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
var ping = new VideoModel({
videoId: 'qMD2Jifubto',
start: 20,
end: 28
});
function VideoModel(attributes) {
this.attributes = {
videoId: attributes.videoId,
start: attributes.start,
end: attributes.end
}
this.get = function(attr) {
if (attr) {
return this.attributes[attr]
} else {
return this.attributes
}
}
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('thumbnail-inner', {
height: '100%',
width: '100%',
enablejsapi: 1,
events: {
'onReady': onPlayerReady
},
rel: 0,
playerVars: {
controls: 0,
modestBranding: 1,
showinfo: 0
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById({'videoId': ping.get('videoId'), 'startSeconds': ping.get('start'), 'endSeconds': ping.get('end'), 'suggestedQuality': 'large'});
}
これはデスクトップでは問題なく動作しますが、モバイル (ios と android でのテスト) では YouTube プレーヤーは読み込まれますが、ビデオは「ビデオが利用できません」で読み込まれるか、単に黒い画面になります。
モバイルでこの作業を行うのを手伝ってもらえますか?