Youtube 播放器 API 示例

Question

我正在从developers.google.com/*上提供的示例中尝试以下代码

<script>
        // 2. This code loads the IFrame Player API code asynchronously.
        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: 'yZxrao3zou4',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    </script>

当我的网页上没有其他内容时，该代码可以完美运行，但是当我尝试将其与我的项目合并时，它似乎不起作用。

我猜问题出在以下几行：

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

谁能告诉我上面两行是做什么的，尤其是 [0] 部分？

我的代码几乎是一样的，只是我在一个函数中使用了代码而不是脚本标记，该函数接受了 videoId 的参数。

编辑： 我的代码如下：

<script>
    // I have a input area, where the user can enter the movie name. When the user submits the movie name, I capture the val and pass it to the youtube().
    function youtube(movie_name) {
        var videoId;
        $.ajax({
            url:"https://www.googleapis.com/youtube/v3/search?part=snippet&q="+movie_name+"&type=video&key=my_key",
            success: function (response) {
                videoId = response.items[0].id.videoId;
                findMovieById(videoId);
            }
        });

    }

    function findMovieById(videoID) {

        $("#player").css('display', 'inline-block');
        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: ""+videoID,
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            alert('Player Ready');
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    }
</script>

Answer 1

示例代码背后的想法是，当您加载 YouTube iFrame 库代码时，它会更加一致在页面的其余部分已加载；因此，示例代码演示了您在页面底部放置了一个内联，在其中，您遍历 DOM，找到一个可以插入另一个标签的位置，然后动态地执行此操作（[0] 只是说“第一个文档中所有名称元素的数组中的条目）。

这里的逻辑是，当 iFrame 库加载时，它会调用函数onYouTubeIframeAPIReady。但由于库是异步加载的，因此最好以这种方式加载它，以确保您的 API 挂钩可能依赖的任何其他内容（例如，您要绑定到的 DOM 中的元素）已经存在。

还请注意，由于加载的库将始终调用onYouTubeIframeAPIReady 函数，它必须在任何其他函数之外定义。否则它是不可调用的。这可能就是为什么将它嵌套在代码中的某个地方不起作用的原因。

随时发布您的一些合并代码以获得更详细的帮助。