Youtube API没有构建iFrame

Question

我使用Youtubes API将视频嵌入到我的网站，我遵循简单的设置指南，现在我开始使用选项进一步自定义我的播放器，一切都很好，直到我的第一个视频停止播放。

基本上，当用户点击页面上许多部分中的一个缩略图时，一个覆盖页面通过$加载。Get和构建视频覆盖，下面是一些标记和jquery来帮助解决这个问题:

请求视频部分:

<script>
$('.video_overlay').click(function(){
    var appended = false;
    if(appended == false) {
        // Load the video section
        $.get("<?php echo VIEWPATH ?>components/video.php", function(data){
            $('.container-full').append(data);
        });
        appended = true;
    }
    return false;
});
</script>

此脚本请求video.php视图并将其附加到文档中:

Video.php只是由2div(用于包装)和一个带有player id的内部div组成，在API的请求完成后，通常由iframe取代。

<div class="video_wrapper">
   <div class="video">
       <div id="player"></div>
   </div>
</div>

最后我将粘贴控制要添加的iframe的JS:

<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: '90%',
        width: '90%',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if(event.data === 0) {
        hidePlayer();
    }
}
// Hides the video player and loads the sections back in
function hidePlayer() {
    $('.video_wrapper').animate({
        opacity:0
    }, 500, function(){
        $('.row').animate({
           opacity:1
        }, 500, function(){
            $('.video_wrapper').remove();
        });
    });
}

当我检测到视频状态为0(完成)时，调用hidePlayer()，这将动画播放器，然后从我的文档中删除视频部分。

但是，如果我再次点击相同的视频，video.php文件被加载，但iframe从未创建，我认为这是因为API代码没有再次下载。我该如何着手解决这个问题?

问候,亚历克斯。

Answer 1

简单点，不需要加载文件video.php，你浪费了太多时间。只需隐藏元素，并在视频播放时显示给他。然后你添加一个click event播放视频，当你点击同一视频!

$(".launch_video").click(function() {
    $(".video_wrapper").show();
    player.playVideo();
});

完整代码:

    <div class="launch_video"></div>
    <div class="video_wrapper" style="display:none">
       <div class="video">
           <div id="player"></div>
       </div>
    </div>
<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: '90%',
            width: '90%',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
    }
    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
        if(event.data === 0) {
            hidePlayer();
        }
    }
    // Hides the video player and loads the sections back in
    function hidePlayer() {
        $('.video_wrapper').animate({
            opacity:0
        }, 500, function(){
            $('.row').animate({
               opacity:1
            }, 500, function(){
                $('.video_wrapper').remove();
            });
        });
    }

    $(".launch_video").click(function() {
        $(".video_wrapper").show();
        player.playVideo();
    });
</script>