Question

有点相关： YouTube IFrame API doesn't always load?

但不同之处在于我按照说明加载了YouTube脚本。请注意，在我的源代码中，iframe在加载顺序中位于脚本块之上。我基于这些说明（下面）。如果我在该页面上，该示例可以正常工作，但是当我将代码放在我的网站上时似乎并不适合我。我确定我错过了一些非常简单的东西但是我想错过它。谢谢！

https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

＆＃13;

var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//Console shows this script is loading

var player;
function onYouTubeIframeAPIReady() {
    console.log("onYouTubeIframeAPIReady", arguments);   //This shows in console

    player = new YT.Player('js_youTubeFrame', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    console.log("onPlayerReady",event); //Never triggers
}

function onPlayerStateChange(event) {
    console.log("onPlayerStateChange", event);  //Never triggers
    if (event.data === YT.PlayerState.PLAYING) {
        console.log("YouTube Video is PLAYING!!");  //Never triggers
    }
}

＆＃13;

<div id="js_youTubeContainer" class="embed-responsive embed-responsive-16by9">
  <iframe id="js_youTubeFrame" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/u3A7bmEOtaU?enablejsapi=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

Answer 1

在我看来，您应该将<iframe> </iframe>替换为<div id= "js_youTubeFrame"> </div>。

我认为Youtube Iframe Api需要该div之后才能在iframe上进行转换。

Answer 2

通过他的API加载Youtube视频的最佳方式是遵循以下sintaxis：

<div id="video-youtube"></div>

<script id="youtube-tracking-script">

    var youtubeVideoId = 'u3A7bmEOtaU'; // replace with your own video id

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementById("youtube-tracking-script");
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var video;

    function onYouTubeIframeAPIReady() {
        video = new YT.Player('video-youtube', {
            height: '352',
            width: '100%',
            videoId: youtubeVideoId,
            playerVars: {rel: 0, showinfo: 0},
            events: {
                'onStateChange': videoPlay
            }
        });
    }

    function videoPlay(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            console.log("YouTube Video is PLAYING!!");
        }
         if (event.data == YT.PlayerState.PAUSED) {
            console.log("YouTube Video is PAUSED!!");
        }
        if (event.data == YT.PlayerState.ENDED) {
            console.log("YouTube Video is ENDING!!");
        }
    }
</script>

https://jsfiddle.net/t4qwfk0d/1/

现有IFrame的YouTube IFrame API无法运行回调

2 个答案: