带有 javascript 个标签的 Youtube iframe API

Question

我正在构建一个在线 'TV'，它将使用多个频道的 YouTube 直播。

频道包含在选项卡中。切换标签时需要停止视频，否则您可以在后台听到音频。

这是 JSFiddle 的 link：https://jsfiddle.net/matlow/08k4csuh/

我在切换到另一个频道时设法关闭了 'Channel 1'：

  var iframe = document.getElementsByClassName("tvscreen")[0].contentWindow;

和

 iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

在选项卡 javascript 中 for 循环也处理 tabcontent[i].style.display = "none";

我想我需要使用 for 循环来调用 iframe 的每个实例...但是我对 javascript 还很陌生，所以我不太确定如何实现这一点。

使用 iframe.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); 也有帮助，这样当点击相关标签时视频会再次自动播放……但我还是不太确定如何实现它。

我已经为此工作了几天，所以如果有人有任何提示或指示，我将不胜感激！

感谢阅读！ :)

Answer 1

您没有正确使用 YouTube API。参见 https://developers.google.com/youtube/iframe_api_reference

在您的 fiddle 中，程序化 play 是不可能的，因为您无法知道 YouTube 播放器何时准备就绪，因为您不是初始化它的人。您尝试 play 视频的时间可能过早。

程序化 pause（您设法暂停了第一个视频）是可能的，这要归功于 iframe src 中的 enablejsapi=1 以及播放器此时已准备就绪的事实。

这是你的 fiddle - https://jsfiddle.net/raven0us/ancr2fgz

的叉子

我添加了一些评论。检查那些。

// load YouTube iframe API as soon as possible, taken from their docs
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// initialised players are kept here so we don't have to destroy and reinit
var ytPlayers = {};

function mountChannel(channel) {
    var player;
    var iframeContainer = document.querySelectorAll('#' + channel + ' iframe');

    // if the channel & iframe we want to "mount" exist, check for playing iframes before doing anything else
    if (iframeContainer.length > 0) {
        // Object.keys() is ECMA 5+, sorry about this, but no easy to check if an object is empty
        // alternatively, you could have an array, but in that case, you won't be able to fetch a specific player as fast
        // if you don't need that functionality, array is as good cause you will just loop through active players and destroy them
        var activePlayersKeys = Object.keys(ytPlayers);
        if (activePlayersKeys.length > 0) { // if players exist in the pool, destroy them
            for (var i = 0; i < activePlayersKeys.length; i++) {
                var activeChannel = activePlayersKeys[i];
                var activePlayer = ytPlayers[activeChannel];

                activePlayer.getIframe().classList.remove('playing'); // mark pause accordingly, by removing class, not necessary
                activePlayer.pauseVideo();
            }
        }

        // check if player already initialised and if player exists, check if it has resumeVideo as a function
        if (ytPlayers.hasOwnProperty(channel)) {
            ytPlayers[channel].playVideo();
        } else {
            var iframe = iframeContainer[0];
            player = new YT.Player(iframe, {
                events: {
                    'onReady': function (event) {
                        // event.target is the YT player
                        // get the actual DOM node iframe nad mark it as playing via a class, styling purposes, not necessary
                        event.target.getIframe().classList.add('playing');
                        // play the video
                        event.target.playVideo();
                        // video may not autoplay all the time in Chrome, despite its state being cued and this event getting triggered, this happens due to a lot of factors 

                    },
                    // you should also implement `onStateChange` in order to track video state (as a result of user actions directly via YouTube controls) - https://developers.google.com/youtube/iframe_api_reference#Events
                }
            });

            // append to the list
            ytPlayers[channel] = player;
        }
    }
}

    // Get the element with id="defaultOpen" and click on it
function onYouTubeIframeAPIReady() {
    // YouTube API will call this when it's ready, only then attempt to "mount" the initial channel
    document.getElementById("defaultOpen").click();
}

这是我第一次使用 YouTube 的 iframe API，但似乎很合理。

带有 javascript 个标签的 Youtube iframe API

Youtube iframe API with javascript tabs

javascript

youtube

api

iframe