Javascript 使用YouTube播放器API向页面添加视频_Javascript_Html_Youtube_Youtube Api

Javascript 使用YouTube播放器API向页面添加视频

javascript html youtube youtube-api

Javascript 使用YouTube播放器API向页面添加视频,javascript,html,youtube,youtube-api,Javascript,Html,Youtube,Youtube Api,我想使用播放器API通过点击按钮加载YouTube视频。目标是用户可以输入一个视频url，单击一个按钮，然后加载下面的视频（我排除了下面的表单输入，使其更简单）我试过使用location.reload（）强制重新加载页面，并检查出不完全有用的内容，因为它们不使用API（稍后添加功能时我需要使用API）从文档中可以看出： <!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and vid

我想使用播放器API通过点击按钮加载YouTube视频。目标是用户可以输入一个视频url，单击一个按钮，然后加载下面的视频（我排除了下面的表单输入，使其更简单）

我试过使用

location.reload（）

强制重新加载页面，并检查出不完全有用的内容，因为它们不使用API（稍后添加功能时我需要使用API）

从文档中可以看出：

<!DOCTYPE html>
<html>
<body>

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<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: 'M7lc1UVf-VE',
            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>
</body>
</html>


// 2. 此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
// 5. 当播放器的状态改变时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.PLAYING&&！done）{
设置超时（停止视频，6000）；
完成=正确；
}
}
函数stopVideo（）{
player.stopVideo（）；
}

我想让这样的东西（非常相似的版本）工作。我不知道为什么它现在没有

<!DOCTYPE html>
<html>
<body>

<input type="submit" value="Submit" id="submit">

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>

    document.getElementById("submit").addEventListener("click", function() {

        location.reload();

        // 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: 'M7lc1UVf-VE',
                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>
</body>
</html>


document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
location.reload（）；
//2.此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//3.此函数创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//4.当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
//5.当播放器的状态发生变化时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.PLAYING&&！done）{
设置超时（停止视频，6000）；
完成=正确；
}
}
函数stopVideo（）{
player.stopVideo（）；
}
});

您有两个问题

1）

onyoutubeiframeapiredy

从未被调用，因为它是在加载youtube API之后定义的。您可以通过添加

控制台.log

看到这一点

2）重新加载页面时，页面将重新加载；i、你以前的变数、视频和一切都消失了

下面是一个在单击按钮时加载和播放youtube视频的简单示例：

<input type="submit" value="Submit" id="submit">

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
    document.getElementById('submit').addEventListener('click', () => {
        new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                onReady: e => e.target.playVideo()
            }
        });
    });
</script>


document.getElementById（'submit'）。addEventListener（'click'，（）=>{
新YT.播放器（“播放器”{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
onReady:e=>e.target.playVideo（）
}
});
});

注意，youtube代码示例要么试图向后兼容，要么就是没有严格更新。他们不遵循现代风格（例如，他们使用

var

而不是

let

，

而不是

==

，

“

而不是

”

，等等。

你有两个问题

1）

onyoutubeiframeapiredy

从未被调用，因为它是在加载youtube API后定义的。您可以通过添加

console.log

看到这一点

2）当您重新加载页面时，页面将重新加载；即，您以前的变量和视频以及所有内容都将消失

下面是一个在单击按钮时加载和播放youtube视频的简单示例：

<input type="submit" value="Submit" id="submit">

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
    document.getElementById('submit').addEventListener('click', () => {
        new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                onReady: e => e.target.playVideo()
            }
        });
    });
</script>


document.getElementById（'submit'）。addEventListener（'click'，（）=>{
新YT.播放器（“播放器”{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
onReady:e=>e.target.playVideo（）
}
});
});

注意，youtube代码示例要么试图向后兼容，要么就是没有严格更新。它们不遵循现代风格（例如，它们使用

var

而不是

let

，

==

而不是

==

，

“

而不是

”

，等等