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]只是说＆＃39 ;文档中所有name元素的数组中的第一个条目。）

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

另请注意，因为加载的库将始终调用onYouTubeIframeAPIReady函数，所以必须在任何其他函数之外定义。否则它不可调用。这可能就是为什么在代码中嵌入代码并不起作用的原因。

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

Youtube播放器API示例

1 个答案: