加载页面后插入 YouTube iframe答案

【问题标题】：Insert YouTube iframe after the page is loaded加载页面后插入 YouTube iframe
【发布时间】：2015-02-01 20:49:35
【问题描述】：

我在底部有一个主要的 YouTube 视频和一些相关视频。 YouTube 视频是从我的网址中的服装视频名称参数加载的。如果视频名称存在 YouTube iframe 会在页面加载时加载，但如果视频名称不存在 YT iframe 不会加载，直到用户单击底部的相关视频。如果用户单击相关视频，则加载 iframe，并且应使用与从一开始就加载 iframe 相同的函数 onPlayerReady 和 onPlayerStateChange。如何在页面中插入 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
            }
        });

【问题讨论】：

标签： javascript jquery youtube youtube-api

【解决方案1】：

如何在页面中插入 iframe 并使用与我相同的功能它是从一开始就加载的。 ?

如果我理解正确，您希望这样做，因为 url 上的某些视频 ID 可能是错误的，并且播放器 iframe 不会播放视频。

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

如果播放器发生错误，则会触发此事件。 API 将通过事件侦听器函数的事件对象。该对象的数据属性将指定一个标识错误类型的整数发生了。 ...

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

使用此解决方案，即使 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

【讨论】：

感谢这个解释清楚的答案。所以你的意思是即使id错误也要加载播放器然后隐藏？