加载页面后插入 YouTube iframe

Question

我在底部有一个主要的 YouTube 视频和一些相关视频。 YouTube 视频是从我的 url 中的一个服装视频名称参数加载的。如果视频名称存在，YouTube iframe 会在页面加载时加载，但如果视频名称不存在，则 YT iframe 直到用户单击底部的相关视频后才会加载。如果用户单击相关视频，则加载 iframe，并且应使用相同的函数 onPlayerReady 和 onPlayerStateChange，因为 iframe 从一开始就已加载。如何在页面中插入 iframe 并使用我从一开始加载时使用的相同功能。？ player.js

 var tag = document.createElement('script'),
     firstScriptTag = document.getElementsByTagName('script')[0],
     player;

    tag.src = "https://www.youtube.com/player_api";

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
            height: height,
            width: width,
            videoId: yt_id,
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    };

function onPlayerReady(event) {
    //code here
    //I want to use this code even when the player is loaded after the         page is loaded (when the user clicks a related video at the bottom)
}

function onPlayerStateChange(event) {
    //here too
}

insert_frame.js

var tag = document.createElement('script'),
            firstScriptTag = document.getElementsByTagName('script')[0],
            player;

        tag.src = "https://www.youtube.com/player_api";

        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        player = new YT.Player('ytplayer', {
            height: height,
            width: width,
            videoId: yt_id,
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

Answer 1

How can I insert the iframe in page and use the same function I use as it was loaded from the beginning. ?

如果我没理解错的话，你想这样做是因为 url 上的一些视频 ID 可能是假的，播放器 iframe 将不会播放视频。

好吧，当使用点击相关视频底部时，您不需要仅仅因为视频 ID 存在而插入帧，使用 YouTube Player API 中的 onError 参数。

This event fires if an error occurs in the player. The API will pass an event object to the event listener function. That object's data property will specify an integer that identifies the type of error that occurred. ...

如果 url 上的视频 ID 不存在，将发送错误。例如，只需隐藏播放器并在用户点击底部的相关视频时显示它。

使用此解决方案，即使 ID 错误，您也只需加载播放器一次且无需在代码中插入帧。示例解决方案。

我给你做了一个错误的小例子 videoID :

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="player"></div>
</body>
</html>

Javascript

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: 'l-gQLqv9f4',
        events: {
            'onError': onPlayerError,
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    $('#player').show();
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
    }
}

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

function onPlayerError() {
  console.log("error on the video id. Iframe is hiding");
  $('#player').hide(); //or do what you want

}

现场演示：http://jsbin.com/mihikiqoma/1/edit?html,js,output

加载页面后插入 YouTube iframe

Insert YouTube iframe after the page is loaded

javascript

youtube

jquery

youtube-api