如何找出何时加载了 youtube 嵌入式 iframe
How to find out when a youtube embedded iframe is loaded
我正在尝试将 youtube iframe
嵌入到我的应用程序中,然后收听该 youtube 视频何时加载并准备好播放;我的想法是让用户按下播放按钮,并且不会显示自动播放的嵌入式视频 直到 视频完全准备好播放,因此用户不必按下一个按钮,然后等待嵌入式播放器加载。
我尝试查看 this youtube iframe api documentation 和各种相关的堆栈溢出,但仍然发现自己无法解决如何向 iframe 播放器添加侦听器以查明视频何时完全加载的问题。 onLoad
全局事件属性似乎也不是我正在寻找的解决方案。我如何才能知道特定的 youtube 嵌入式 iframe 视频何时已完全加载并准备好播放?我是否错误地实施了 iframe api?你可以在下面看到我的尝试。谢谢!
const YoutubePlayer: React = () => {
const readyFn = () => console.log('ready');
let player;
const onYouTubePlayerAPIReady = () => {
player = new window.YT.Player("youtube-iframe-id", {
height: '390',
width: '640',
videoId,
events: {
onReady: readyFn,
},
});
};
return (
<iframe
allowFullScreen
id="youtube-iframe-id"
src="https://www.youtube.com/embed/XmnZ9HZTHjw"
/>
);
};
ReactDOM.render(<YoutubePlayer />, app);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<div id="app"></div>
实际上 iframe
就像页面内 JavaScript 的另一个线程。在这种情况下,您可以使用 posting message
在线程之间建立连接并使用 addEventListener
监听它们。如下所示:
document.addEventListener('message', () => { /* Do Something */ }, false);
对于 YouTube 的加载,您可以使用 onLoad
方法来 post 视频已加载的消息并将其传递给另一个线程,另一个线程 Do Something
.
希望我的回答对你朋友有帮助。
在您的 html 页面上执行此操作
<iframe id="ik_player_iframe"
frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
width="560"></iframe>
function onYouTubeIframeAPIReady() {
//creates the player object
ik_player = new YT.Player('ik_player_iframe');
console.log('Video API is loaded');
//subscribe to events
ik_player.addEventListener("onReady", "onYouTubePlayerReady");
ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
}
function onYouTubePlayerReady() {
console.log('Video is ready to play');
}
function onYouTubePlayerStateChange(event) {
console.log('Video state changed');
}
我最终在安装组件时注入脚本并添加事件侦听器,如 this answer 中所述。
我正在尝试将 youtube iframe
嵌入到我的应用程序中,然后收听该 youtube 视频何时加载并准备好播放;我的想法是让用户按下播放按钮,并且不会显示自动播放的嵌入式视频 直到 视频完全准备好播放,因此用户不必按下一个按钮,然后等待嵌入式播放器加载。
我尝试查看 this youtube iframe api documentation 和各种相关的堆栈溢出,但仍然发现自己无法解决如何向 iframe 播放器添加侦听器以查明视频何时完全加载的问题。 onLoad
全局事件属性似乎也不是我正在寻找的解决方案。我如何才能知道特定的 youtube 嵌入式 iframe 视频何时已完全加载并准备好播放?我是否错误地实施了 iframe api?你可以在下面看到我的尝试。谢谢!
const YoutubePlayer: React = () => {
const readyFn = () => console.log('ready');
let player;
const onYouTubePlayerAPIReady = () => {
player = new window.YT.Player("youtube-iframe-id", {
height: '390',
width: '640',
videoId,
events: {
onReady: readyFn,
},
});
};
return (
<iframe
allowFullScreen
id="youtube-iframe-id"
src="https://www.youtube.com/embed/XmnZ9HZTHjw"
/>
);
};
ReactDOM.render(<YoutubePlayer />, app);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<div id="app"></div>
实际上 iframe
就像页面内 JavaScript 的另一个线程。在这种情况下,您可以使用 posting message
在线程之间建立连接并使用 addEventListener
监听它们。如下所示:
document.addEventListener('message', () => { /* Do Something */ }, false);
对于 YouTube 的加载,您可以使用 onLoad
方法来 post 视频已加载的消息并将其传递给另一个线程,另一个线程 Do Something
.
希望我的回答对你朋友有帮助。
在您的 html 页面上执行此操作
<iframe id="ik_player_iframe"
frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
width="560"></iframe>
function onYouTubeIframeAPIReady() {
//creates the player object
ik_player = new YT.Player('ik_player_iframe');
console.log('Video API is loaded');
//subscribe to events
ik_player.addEventListener("onReady", "onYouTubePlayerReady");
ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
}
function onYouTubePlayerReady() {
console.log('Video is ready to play');
}
function onYouTubePlayerStateChange(event) {
console.log('Video state changed');
}
我最终在安装组件时注入脚本并添加事件侦听器,如 this answer 中所述。