3
모바일 YouTube에서 이미지를 클릭 한 후 재생할 웹 사이트를 만들려고합니다.Youtube Api playVideo 메서드가 일부 휴대 기기에서 작동하지 않습니다.
여러 Android 휴대 전화/버전에서 테스트를 거쳤으며 일부는 의도 한대로 작동하지 않습니다.
내 말은 버퍼링을 멈추고 비디오를 재생할 수 없다는 뜻입니다. 또 다른 사실은 사용자가 비디오를 트리거하여 프로그래밍 방식으로 재생하지 않은 후에 플레이어가 작동한다는 것입니다. 내가 직접 YouTube 플레이어, 사용자가 비디오를 재생하려면 클릭 한 후 버튼/이미지를 클릭하면 다른 비디오를 재생할 수 있습니다.
내가 여기 당신이 (player.playVideo())는 모바일 장치에서 사용할 수 없습니다 사용하는 일부 기능 같은데 JsFiddle
$(document).ready(function() {
// Caching jQuery objects
var $body = $('body'),
$log = $('#log'),
$yt = $('#ytplayer'),
$ytwrap = $('#ytwrapper'),
$choices = $('#choices');
// This code loads the YouTube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
$body.append(tag);
// This will become the player object when the API is ready
var player;
// See what kind of device we're using
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf('android') > -1;
var isIpad = userAgent.indexOf('ipad') > -1;
var isIphone = userAgent.indexOf('iphone') > -1;
window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
videoId: videos[0],
playerVars: {
allowfullscreen: 'allowfullscreen',
playsinline: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
window.player = player;
//hide player
slidePlayer(false);
};
function onPlayerStateChange(event) {
// When a video starts playing,
// enable the fake fullscreen mode on Android & iPad
if (event.data == YT.PlayerState.PLAYING) {
if (isIpad) {
fakeFullScreen(true);
} else if (isAndroid) {
fakeFullScreen(true);
}
}
// On pause: hide the player, show thumbs
if (event.data == YT.PlayerState.PAUSED) {
if (isAndroid) {
// Exit fullscreen
fakeFullScreen(false);
// Scroll back to choices
window.scrollTo(0, playerTop);
} else if (isIpad) {
fakeFullScreen(false);
window.scrollTo(0, playerTop);
} else if (isIphone) {
slide(false);
}
}
}
$('#vstImageAd .imageWrap img').click(function (e) {
e.preventDefault();
var $this = $(this);
if (player) {
$this.css("display", "none");
slidePlayer(true);
player.playVideo();
}
});
// When a thumb image is pushed, start the video
$('#choices .playthumb img').click(function (e) {
var $this = $(this),
nr = parseInt($this.data('nr'));
if (!videos[nr]) nr = 1;
player.loadVideoById(videos[nr]);
// Hide the thumbs
slide(true);
});
});