Vimeo Player SDK：使用 iframe 时事件侦听器不起作用

Question

我被卡住了...我正在尝试让 Vimeo 播放器在水平和垂直方向上都有响应（宽度：100vw；高度：100vh），并且还可以使用侦听器 player.on() 来显示和隐藏导航纽扣。使用 iframe 似乎可以防止使用 player.on()。下面的代码表明我可以使一个要求或另一个工作，但不能同时工作。

<!-- With this code below, the video player is responsive both horizontally and vertically... but the previous and next arrows are not hidden when the video is played. player.on() is not passed -->

<div>
    <div style="padding:56.25% 0 0 0;position:relative;">
        <iframe src="https://player.vimeo.com/video/76979871?playsinline=0" style="position:absolute;top:0;left:0;width:100vw;height:100vh" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    
    <script src="https://player.vimeo.com/api/player.js"></script>


    <div id="flex-nav" class="nav-shown">

        <div class="flex-prev"><a href="https://google.com"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z"/></svg></a></div>
        
        <div class="flex-next"><a href="https://google.com"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z"/></svg></a></div>

    </div>
</div>

<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        console.log('Played the video, previous and next arrows hidden');
        var element = document.getElementById("flex-nav");
        element.classList.remove("nav-shown");
        element.classList.add("nav-hidden");
    });

    player.on('pause', function() {
        console.log('Paused the video, previous and next arrows shown');
        var element = document.getElementById("flex-nav");
        element.classList.remove("nav-hidden");
        element.classList.add("nav-shown");
    });

    player.getVideoTitle().then(function(title) {
      console.log('title:', title);
    });
</script>

<!-- With this code below, the previous and next arrows are hidden when the video is played... but the video player is not responsive vertically -->

<div>
    <div id="sessionVideo"></div>
    
    <script src="https://player.vimeo.com/api/player.js"></script>

    <div id="flex-nav" class="nav-shown">

        <div class="flex-prev"><a href="https://google.com"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z"/></svg></a></div>
        
        <div class="flex-next"><a href="https://google.com"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z"/></svg></a></div>

    </div>
</div>

<script>
    var options = {
        id: '76979871',
        responsive: true,
        loop: false,
        autoplay: false,
        playsinline: false,
        speed: false,
    };

    var player = new Vimeo.Player('sessionVideo', options);

    player.on('play', function() {
        console.log('Played the video, previous and next arrows hidden');
        var element = document.getElementById("flex-nav");
        element.classList.remove("nav-shown");
        element.classList.add("nav-hidden");       
    });

    player.on('pause', function() {
        console.log('Paused the video, previous and next arrows shown');
        var element = document.getElementById("flex-nav");
        element.classList.remove("nav-hidden");
        element.classList.add("nav-shown");
    });

    player.getVideoTitle().then(function(title) {
      console.log('title:', title);
    });
</script>

<!-- Both codes above use this CSS -->

<style>
    .nav-hidden {
        display: none;
    }
    .nav-shown {
        display: flex;  
    }
    #flex-nav {
        justify-content: space-between;
    }
    #flex-nav > div {
        position: fixed;
        bottom: 50vh;
    }
    .flex-prev {
        left: 10px;
    }
    .flex-next {
        right: 10px;
    }
</style>

Answer 1

解决方案是使用 iframe 并通过 javascript 更新其 src=""。