自定义按钮上的全屏 vimeo 触发事件答案

【问题标题】：fullscreen vimeo trigger event on customize button自定义按钮上的全屏 vimeo 触发事件
【发布时间】：2015-01-12 16:12:59
【问题描述】：

有没有办法使用 JavaScript 在 Vimeo 播放器上触发全屏模式？我想隐藏播放器的所有控件，并且我有一个侧面的自定义按钮，我想触发全屏。

<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="//player.vimeo.com/video/76979871?api=1&player_id=player1" width="630"  height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div>
 <button>Play</button>
 <button>Pause</button>
 <button class="fullscreen">FullScreen</button>
</div>


$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});


 // button to trigger fullscreen 
  $('button.fullscreen').bind('click', function() {
    // here i want trigger fullscreen on player Vimeo
 });


});

【问题讨论】：

标签： javascript jquery video vimeo-api vimeo-player

【解决方案1】：

很遗憾，没有。全屏 API 需要直接的用户操作，而该操作在 postMessage 上会丢失给玩家。

【讨论】：

【解决方案2】：

将嵌入 iframe 的宽度和高度设置为 100%，并将其放入 div 中。然后，您可以管理 div 大小。

它不是真正的全屏，但它可以使用浏览器窗口的所有大小。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>

<div id="video">

    <!-- embed here --------------- -->

    <iframe 
        src="https://player.vimeo.com/video/391669239?h=0b278c0322" 
        width="100%" 
        height="100%" 
        allowfullscreen
        frameborder="0" 
    >
    </iframe>

    <!-- -------------------------- -->

</div>

<button id="fs1" onclick="setFullScreen(1)" >Full screen</button>

<button id="fs0" onclick="setFullScreen(0)" >Windowed</button>

</body>
</html>

/////////////////////////////////////////////////////

function setFullScreen(onoff) {

    // onoff : 
    //   0 windowed
    //   1 full screen

    let o = document.getElementById('video');

    if(onoff === 0) {

        o.style.position = "";
        o.style.top = "";
        o.style.left = "";
        o.style.width = "200px";
        o.style.height = "100px";


    } else if(onoff === 1) {

        o.style.position = "absolute";
        o.style.top = "0";
        o.style.left = "0";
        o.style.width = "100%";
        o.style.height = "100%";
    }
}

https://jsfiddle.net/k06pr4L7/

【讨论】：