在页面加载后插入 YouTube iframe

我有一个主要的YouTube视频和一些相关的视频在底部。YouTube视频是从我的网址中的costum视频名称参数加载的。如果视频名称存在，YouTube iframe 会在页面加载时加载，但如果视频名称不存在，则在用户单击底部的相关视频之前，不会加载 YT iframe。如果用户单击相关视频，则会加载 iframe，并且应使用相同的函数 onPlayerReady 和 onPlayerStateChange，因为 iframe 从一开始就被加载。如何在页面中插入 iframe 并使用我从一开始就加载时使用的相同功能。?播放器.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
            }
        });

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

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

好吧，您不需要插入框架，因为使用时存在视频ID，请单击底部的相关视频，使用YouTube播放器API中的onError参数。

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

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

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

我用错误的视频ID给你做了一个小例子：

.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>

爪哇语

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

相关内容

最新更新

热门标签：