苹果阻止了视频的自动播放。我明白了但是真的不是我可以对我的代码做些什么来让它在外部div上播放?我很难接受这一次的失败。不喜欢“不能做”的想法。当用户以任何方式点击播放按钮时,我的用户正在做出有意识的选择。因此它不是页面加载时的随机自动播放。这是我的代码。像桌面浏览器上的魅力一样工作。但真的想让它在ios设备上运行
callMain ();
function playerApp(inputVid) {
var player = new YT.Player('player', {
videoId: inputVid,
width:'100%',
height:'90%',
playerVars: {
rel: 0,
controls : 2,
enablejsapi : 1,
origin : document.domain,
wmode : "transparent"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
function onPlayerStateChange(e) {
//this removes the player once the video is done
if(e.data == 0){
backgroundOverlay(false);
$('.videoplayer-wrapper').remove();
}
}
function backgroundOverlay(state){
var pageHeight = $( document ).height();
var overlay = '';
var wrapperHTML = ''
+ '<div class="videoplayer-wrapper">'
+ '<div id="player" class="video-player"></div>'
+ '<div class="videoplayer-close videoplayer-toggle">Close</div>'
+ '</div>';
if(state){
overlay = $('body').append('<div class="video-overlay-background" style="height:'+pageHeight+'px;"></div>').append(wrapperHTML);
}else{
overlay = $('.video-overlay-background').remove();
}
return overlay;
}
function callMain () //$(function(){
{
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 inputVid = '';
$('.videoplayer-toggle').on('click', function(){
inputVid = $(this).attr('data-youtubeid');
backgroundOverlay(true);
playerApp(inputVid)
$('.videoplayer-close').on('click', function(){
backgroundOverlay(false);
$('.videoplayer-wrapper').remove()
})
});
}
这是我的jsfiddle