javascript - 如何知道来自 <iframe> 的视频是否正在播放(youtube 和 vimeo)

Question

我有一个 youtube/vimeo 内容的 iframe，我会知道在执行我的函数时是否正在播放视频。

实际上，当有人单击图像时，我的代码会在 iframe 中设置与该图像对应的正确视频。我有一个按钮可以暂停和隐藏我的 iframe

我通过 youtube API 找到了这个:getPlayerState() ,
和 getPaused()来自 vimeo API。

我不想使用点击事件，我希望每次都能知道 pauseState !

https://developers.google.com/youtube/iframe_api_reference?hl=fr
https://developer.vimeo.com/player/sdk/reference#events-for-text-tracks

<iframe id="player" class="center" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

function loadVideo(id) {
    var videoPlayer = document.getElementById('videoPlayer');


    var player = document.getElementById('player');
    var url = player.src;

    switch (id) {
        case 1:
            url = "https://www.youtube.com/embed/n1tswFfg-Ig?enablejsapi=1";
            break ;

        case 2:
            url = "https://player.vimeo.com/video/237596019?api=1";
            break ;
                default:
            callPlayer("pauseVideo");
            break ;




function callPlayer(func, args) {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; ++i) {
        if (iframes[i]) {
            var src = iframes[i].getAttribute('src');
            if (src) {
                if (src.indexOf('youtube.com/embed') != -1) {
                    var player = new YT.Player(iframes[i], {});
                    //2 lines below doesn't work
                        var value = player.getPlayerState();
                    alert('value');
                    iframes[i].contentWindow.postMessage(JSON.stringify({
                        'event': 'command',
                        'func': func,
                        'args': args || []
                    }), "*");
                }
                if (src.indexOf('player.vimeo.com/video') != -1) {
                    var player = new Vimeo.Player(iframes[i]);
                    switch (func) {
                        case 'pauseVideo':
                            //always show 'false', never 'true'
                                        if (player.getPaused() == true ) {
                                alert('true');
                            }else {
                                alert('false');
                            }

                            player.pause();
                            break ;
                        default:
                            break ;
                 }
                }
            }
        }
    }
}

我使用警报来了解某些东西是否正常工作，并且使用此代码，youtube 警报不起作用，并且 vimeo 警报始终显示“假”。

谢谢你的帮助

Answer 1

也许这个问题可能与使用相同的 iframe 有关，最终会弄乱每种视频的功能。通过这种方式，一种解决方案是使用多个 iframe，这些 iframe 将根据需要显示或隐藏。

已报告的另一个问题是直接通过 <iframe> 启动 YouTube 视频。最终不会激活收听功能。因此，理想的做法是按照 YouTube Player API documentation 中的建议进行操作。并以 <div> 开始视频，所以 .getPlayerState()和其他方法效果很好。

// Buttons to switch videos
function changeVideo (btn) {
  if (btn.classList.contains("active")) {
    return;
  }
  document.querySelector('.buttons .active').classList.remove('active');
  document.querySelector('.video .active').classList.remove('active');

  document.querySelector("." + btn.dataset.video + "-video").classList.add('active');
  btn.classList.add('active');
}

// YouTube starter
let youtubePlayer;
function onYouTubeIframeAPIReady() {
  youtubeVideo = new YT.Player('youtubePlayer', {
    height: '315',
    width: '560',
    videoId: 'tgbNymZ7vqY'
  });
}

// YouTube - check if it's paused
function checkYoutubePaused() {
  let state = youtubeVideo.getPlayerState();
  if (state <= 0 || state == 2 || state == 5) {
    return true;
  }
  return false;
}

// Vimeo starter
const vimeoIframe = document.querySelector('.vimeo-video');
const vimeoPlayer = new Vimeo.Player(vimeoIframe);

// Vimeo - check if it's paused
async function checkVimeoPaused() {
  let state;
  await vimeoPlayer.getPaused().then(function(paused) {
    state = paused;
  });
  return state;
}

// My Function
async function myFunction() {
  
  vimeoState = await checkVimeoPaused();
  
  let youtubePaused = checkYoutubePaused() ? "PAUSED" : "RUNNING";
  let vimeoPaused = vimeoState ? "PAUSED" : "RUNNING";

  alert("Youtube Video is " +  youtubePaused + "\n" + "Vimeo Video is " + vimeoPaused);
  
}

.youtube-video {
  display: none;
}
.vimeo-video {
  display: none;
}
.video .active {
  display: inline; 
}
.buttons .active {
  color: #ffffff;
  background-color: #333333;
}

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<div class="video">
 
  <div id="youtubePlayer" class="youtube-video active"></div>   
  <iframe class="vimeo-video" src="https://player.vimeo.com/video/120680495" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>  

<div>
  
  <span class="buttons">
    <button data-video="youtube" class="active" onclick="changeVideo(this)">Youtube Video</button>
    <button data-video="vimeo" onclick="changeVideo(this)">Vimeo Video</button>
  </span>
  
  <span>
    <button onclick="myFunction()">Run My Function</button>
  </span>
 
</div>