1

我正在尝试以最干净的方式更改在 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>
4

2 回答 2

0

我遇到了同样的问题（我认为）...我希望用户能够更改多个播放器的内容，这对我有用：我调用 youtube api，并添加了新的 onload 功能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>

我的 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>';
于 2014-03-21T00:49:29.260 回答
0

试试这个：

<!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/

希望这可以帮助

于 2013-11-16T18:02:28.690 回答