Question

我有一个内含youtube / vimeo内容的iframe，执行功能后，我会知道视频是否正在播放。

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

我是通过youtube API getPlayerState()找到的，和getPaused()来自vimeo API。

我不想使用click事件，我希望每次都能知道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 ;
                 }
                }
            }
        }
    }
}

我使用Alert来了解某件事是否有效，并且使用此代码，youtube警报无法正常工作，并且vimeo警报始终显示为“ false”。

感谢您的帮助

Answer 1

问题可能与使用相同的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>

如何知道是否正在播放<iframe>中的视频（youtube和vimeo）

1 个答案: