Question

我有一个主要的YouTube视频和底部的一些相关视频。 YouTube视频是从我的网址中的costum视频名称参数加载的。如果存在视频名称，则会在页面加载时加载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

如何在页面中插入iframe并使用与我相同的功能它从一开始就装满了。？

如果我理解正确，你想要这样做，因为网址上的某些视频ID可能是错误的，并且播放器iframe不会播放该视频。

嗯，您不需要插入一个框架只是因为当使用点击底部的相关视频时存在视频ID，请使用YouTube Player API中的onError参数。

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

如果网址上的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

加载页面后插入YouTube iframe

1 个答案: