0

有没有办法使用 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
 });


});
4

2 回答 2

0

抱歉不行。全屏 API 需要直接的用户操作，而该操作会丢失postMessage给玩家。

于 2015-04-16T18:59:05.367 回答
0

将嵌入 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/

于 2021-09-23T10:46:17.127 回答