javascript - 使用 Youtube Javascript API 检查剩余时间

Question

我正在嵌入 Youtube 视频并使用 YT JS API。鼓励用户使用他们的 Chromecast 来观看嵌入的视频。但是，当使用播放器中的按钮转换视频时，player.getCurrentTime()和 player.getPlayerState()变得卡住，并且onStateChange事件不会触发。

我能做些什么来解决这些问题，还是只有 youtube 才能解决这个问题？谢谢!

我的代码:

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events:{
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerStateChange(event){
    console.log('Player StateChange: '+event.data); //This never runs when casting a video.
}

Answer 1

这是代码

var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


        var player;

        //execute as soon as the player API code downloads
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // execute when the onReady event fires
        //starts video
        function onPlayerReady(event) {

            console.log("onPlayerReady");
            console.log(event);

            var duration = event.target.getDuration();

            console.log("Duration:" + duration);

            fillPlaybackRates();
        }

        //  when the onStateChange event fires
        function onPlayerStateChange(event) {

            console.log("onPlayerStateChange")
            console.log(event)

            if (event.data == YT.PlayerState.PLAYING) {
                console.log(YT);
            }
        }


        var pause = $("#pause"),
            start = $("#start"),
            mute =  $("#mute");

        pause.on('click', function () {
            player.pauseVideo();
        });

        start.on('click', function () {
            player.playVideo();
        });       


        var fillPlaybackRates = function () {

            var playbackDropdownMenu = $(".dropdown-menu");
            var playbackRates = player.getAvailablePlaybackRates();

            console.log(playbackRates);

            for (var i = 0; i < playbackRates.length; i++) {

                playbackDropdownMenu.append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + playbackRates[i] + '</a></li>');
            }          
        }


        var playbackRatesButton = $("#playback-rates");
        $(document).on('click','.dropdown-menu > li > a', function () {

            var option = $(this).text();
            playbackRatesButton.text(option);

            player.setPlaybackRate(option);
        });

这是完整的要点: iFrameYouTubeApi.html

您也可以在这里查看:Continuing with Chromecast: Embedding YouTube into Custom Receivers