在document.ready中添加youtube iframe代码时出现问题

时间:2013-04-22 10:01:46

标签: javascript jquery youtube youtube-api

我想在我的$(document).ready()函数中添加youtube iframe api代码,但是当我这样做时,播放器似乎无法加载,当我将代码移到文档外时。 。任何人都可以向我提供有关如何在功能内部显示此视频的任何建议吗?

JS

$(document).ready(function() {
var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady() {
        console.log('ready');
    }

    function onPlayerStateChange() {
        console.log('player changed');
    }
});

2 个答案:

答案 0 :(得分:10)

如果您将function onYouTubePlayerAPIReady() {...}更改为window.onYouTubePlayerAPIReady = function() {...},则可以在$(document).ready()函数中定义您的YouTube iframe API回调,并可能从{{{ 1}}范围到你的回调范围。

我不确定这样做有多大优势,但如果你真的想这样做,那就是一个选择。

答案 1 :(得分:0)

脚本将在加载时调用onYouTubePlayerAPIReady()。当你......让我们说......“隐藏”这些函数在你的DOM就绪包装器中时,它们不再可用于YT API调用(超出范围)。

由于您无法直接访问YT API脚本文件,因此您无法更改此行为,并且您无法提出要求。