Полноэкранное событие запуска Vimeo при нажатии кнопки настройки
Есть ли способ запустить полноэкранный режим на проигрывателе Vimeo с помощью JavaScript? Я хочу скрыть все элементы управления игрока, и у меня есть боковая кнопка "Настроить", которую я хочу вызвать в полноэкранном режиме.
<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
});
});
2 ответа
К сожалению нет. Полноэкранный API требует прямого действия пользователя, и это действие теряется на postMessage игроку.
Установите размер встроенного 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%";
}
}