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=""。

Vimeo Player SDK：使用 iframe 时事件监听器不工作

Vimeo Player SDK: event listener not working when using an iframe

javascript

events

iframe

sdk

vimeo