0
我正在使用以下腳本來播放YouTube視頻作爲引導模式,它在桌面版本上播放視頻,但在移動設備(例如iPhone和iPad)上播放視頻時無法播放。YouTube作爲桌面版本彈出播放,但不在移動設備上
YouTubeLoader.js
// Load & insert into DOM Youtube iframe_api
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* Create Player */
var player;
function onYouTubeIframeAPIReady() {
console.log('Api Loaded');
}
$(".youtubeVideoLoader").each(function() {
// Set the BG image from the youtube ID
$(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)');
// Click the video div
$(document).delegate('#' + this.id, 'click', function() {
// Vemos le id del video
console.log(this.id);
// Create new instance of player
player = new YT.Player('videoModalContainer', {
videoId: this.id,
events: {
'onReady': OpenModal,
'onStateChange': console.log('Changed')
}
});
// Show Modal
function OpenModal() {
$("#youtubeModal").modal({backdrop: "static"});
// Set Highres
player.setPlaybackQuality('highres');
// Play Video
player.playVideo();
};
});// /click
}); // /each video
// Add a Lisener to Modal CLose Button
$('#CloseModalButton').click(function(){
console.log('Stop Preset');
player.destroy();
});
HTML
<div id="3WCMCeS7Na4" class="youtubeVideoLoader">
</div>
<!-- Modal Template -->
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-footer">
<button id="CloseModalButton" type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
<div class="modal-content">
<div class="modal-body">
<div id="videoModalContainer">
</div>
</div>
我與其他視頻嘗試過了,我面臨着同樣的問題,因爲我最初認爲這可能是一個視頻這是不是在玩,由於特權