带自定义YouTube控件的jQuery Mobile弹出窗口

我想创建一个嵌入YouTube视频并允许自定义控件的jQuery Mobile Popup（或任何类型的JavaScript模式）。带自定义YouTube控件的jQuery Mobile弹出窗口

这是一个JSFiddle demo带有一个基本的“播放”按钮，希望可以帮助证明我的问题。

基本上，我在HTML的iframe代码：

<iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen></iframe>

然后，当视频加载我这样做：

$(document).on("pagecreate", function() { 
    // bind click events 
    $(document).on('click', '#play', function() { 
    playVideo(); 
    return false; 
    }); 

    $(".ui-popup iframe") 
    .attr("width", 0) 
    .attr("height", "auto"); 
    $("#popupVideo").on({ 
    popupbeforeposition: function() { 
     initYoutubePlayer(); 

     // call our custom function scale() to get the width and height 
     var size = scale(497, 298, 15, 1), 
     w = size.width, 
     h = size.height; 
     $("#popupVideo iframe") 
     .attr("width", w) 
     .attr("height", h); 
    }, 
    popupafterclose: function() { 
     $("#popupVideo").html("<span></span>"); 
     $("#popupVideo iframe") 
     .attr("width", 0) 
     .attr("height", 0); 
    }, 
    }); 
}); 

function initYoutubePlayer() { 
    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; 

    function onYouTubeIframeAPIReady() { 
    alert('onYouTubeIframeAPIReady'); 
    player = new YT.Player('iframe-video', { 
     events: { 
     'onReady': onPlayerReady, 
     } 
    }); 
    }; 

    function onPlayerReady(event) { 
    alert('ready'); 
    }; 

    alert('initialized'); 
} 

function playVideo() { 
    alert('playVideo...'); 
    //player.playVideo(); 
}

加载视频工作正常，但我不能得到YouTube iFrame API工作，我可以实例化YT.Player。换句话说，'onYouTubeIframeAPIReady'不会触发。

我已经尝试了各种各样的这个JSFiddle代码的排列，但感觉像我可能会失去明显的东西。

是否有可能在jQuery Mobile Popup或JavaScript模式中使用自定义YouTube控件？

来源

2016-08-17 kanso

SEE FIDDLE

<!DOCTYPE html> 
 
<title>JQM latest</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
 

 

 
<body> 
 
    <div data-role="page" id="index"> 
 
    <a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a> 
 
    <div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content"> 
 
     <a href="#" id="play" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Play</a> 
 
     <br> 
 
     <div id="player"></div> 
 
     <!-- <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe> --> 
 
    </div> 
 
    </div> 
 
</body> 
 
<script> 
 
    // 2. This code loads the IFrame Player API code asynchronously. 
 
    var tag = document.createElement('script'); 
 

 
    tag.src = "https://www.youtube.com/iframe_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
    // 3. This function creates an <iframe> (and YouTube player) 
 
    // after the API code downloads. 
 
    var player; 
 

 
    function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('player', { 
 
     height: '390', 
 
     width: '640', 
 
     videoId: 'a0gact_tf_0', 
 
     events: { 
 
     'onReady': onPlayerReady 
 
     } 
 
    }); 
 
    } 
 

 
    // 4. The API will call this function when the video player is ready. 
 
    function onPlayerReady(event) {} 
 

 
    function stopVideo() { 
 
    player.stopVideo(); 
 
    } 
 

 
    $(document).on('click', '#play', function() { 
 
    player.playVideo(); 
 
    }); 
 
</script> 
 

 
</html>

来源

2016-08-17 14:54:54 Iceman

哇，这是快。谢谢！ – kanso

@kanso很高兴帮助。小提琴将完美运作。由于某些原因，该代码段不能在SO内正常运行。 – Iceman

带自定义YouTube控件的jQuery Mobile弹出窗口

回答

相关问题