Youtube API 未构建 iFrame

Posted 2023-05-09

【中文标题】Youtube API 未构建 iFrame

【英文标题】：Youtube API not building iFrame

【发布时间】：2014-09-24 01:39:04

【问题描述】：

我正在使用 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 仅由 2 个 div（用于包装）和一个带有 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 代码。我该如何解决这个问题？

问候， 亚历克斯。

【参考方案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>