Question

我正试图以最干净的方式更改YouTube iframe中播放的视频，几个月前我已经使用了此代码，但YouTube更改了他们的API并且它已停止为我工作。现在，在切换视频的SRC属性以切换正在播放的视频后，onPlayerStateChange事件未触发。我是编码的业余爱好者所以我可能会在这里遗漏一些简单的东西，但任何输入都会非常感激。以下是加载YouTube视频的代码，当它结束时，会自动弹出一个警告。但是，当您单击按钮并通过切换SRC属性来切换视频时，警报功能将停止工作，就好像整个onPlayerStateChange函数停止工作一样。我无法在jsfiddle中使用它，但可以在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>

Answer 1

请改为尝试：

<!DOCTYPE html>
<html>
<body>
    <script src="jquery-1.10.2.min.js"></script>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>

    <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: '0Bmhjf0rKe8',
            playerVars: { 'autoplay': 1, 'controls': 1 },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
            });
        }

        var playerReady = false;
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            playerReady = true;
        }


        // 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.
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.ENDED ) {            
            alert('done');
            }
        }

        $(".button").on("click", function(){ 
            player.loadVideoById("Vw4KVoEVcr0", 0, "default"); 
        });

    </script>
</body>
</html>

这里的小提琴：http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/

希望这有帮助

Answer 2

我遇到了同样的问题（我想）...我希望用户能够为多个玩家更改内容，这对我有用：我用onload函数调用youtube api到新的Youtubelink，以便每次iframe更改时重新加载。

我的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>

MY JS：

function floaded1() {

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

我用视频采集器加载了什么：

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>';

切换SRC Attr后，YouTube API OnStateChange侦听器停止工作

2 个答案: