YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作

2023-09-06前端开发问题

本文介绍了YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我正在尝试以最简洁的方式更改 YouTube iframe 中播放的视频，几个月前我让这段代码正常工作，但 YouTube 更改了他们的 API，它对我停止工作了.现在，在我切换视频的 SRC 属性以切换正在播放的视频后，onPlayerStateChange 事件没有触发.我是编码的业余爱好者，所以我可能在这里遗漏了一些简单的东西，但任何输入都将不胜感激.下面是加载 YouTube 视频的代码，当它结束时，会自动弹出一个警报.但是，当您单击按钮并通过切换 SRC 属性切换视频时，警报功能停止工作，就好像整个 onPlayerStateChange 功能停止工作一样.我无法让它在 jsfiddle 中工作，但可以在 http://thetunedrop.com 找到现场演示的链接/test.html

I am trying to change the video playing in the YouTube iframe in the cleanest way possible and a few months ago I had this code working, but YouTube changed their API and it stopped working for me. Now the onPlayerStateChange event is not firing after I switch out the video's SRC attribute to switch the video that is playing. I'm an amateur to coding so I may be missing something simple here, but any input would be greatly appreciated. Below is a code that loads a YouTube video and when it ends, there's an alert that automatically pops up for you. However, when you click the button and switch the video by switching out the SRC attribute, the alert function stops working and its as if the entire onPlayerStateChange function stops working. I could not get it working in jsfiddle, but a link to a live demo can be found at http://thetunedrop.com/test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="player"></div>
<button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>
</body>
</html>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: '0Bmhjf0rKe8',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {            
        alert('done');
    }
}

function load_ytid(youtubeid){
$("#player").attr("src", "http://www.youtube.com/embed/" + youtubeid + "?fs=1&autoplay=1");
}
$(document).ready(function(){

$(".button").on("click", function(){
var youtubeid = $(this).data("youtubeid");
load_ytid(youtubeid);   
});

});
</script>

推荐答案

我遇到了同样的问题(我认为)...我希望用户能够为多个玩家更改内容，这就是对我有用:我使用新的 Youtubelink 附加的 onload 函数调用 youtube api，这样每次 iframe 更改时都会重新加载.

I had kind of the same problem (I Think)... I wanted the user to be able to change the content for multiple players, and this is what works for me: I call the youtube api with a onload function additional to the new Youtubelink, so that reloads every time the iframe changes.

我的 HTML:

<iframe onload="floaded1()" id="player1" width="240" height="220" 
src="http://www.youtube.com/embed/0Bmhjf0rKe8
?enablejsapi=1&rel=0&showinfo=2&iv_load_policy=3&modestbranding=1" 
frameborder="0" allowfullscreen> </iframe>

我的 JS:

function floaded1() {

player1 = new YT.Player('player1', {
        events: {
            'onStateChange': function (event) {
if (event.data == 0) {
alert('done');
};
            }
        }
    });
}

我用视频选择器加载的内容:

WHAT I LOAD WITH A VIDEO PICKER:

html += '<iframe onload="floaded1()" id="player1" width="240" height="220"
src="http://www.youtube.com/embed/'+YouTubeVideoId+'?enablejsapi=1&rel=0&
showinfo=2&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen> 
</iframe>';

这篇关于YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

layui中表单会自动刷新的问题

JavaScript小数运算出现多位的解决办法

jQuery怎么动态向页面添加代码？

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

热门文章

热门精品源码

最新VIP资源