Я запускаю два видео друг над другом, как на картинке:
Есть кнопка с именем «Ввести на полный экран». Когда кто-то нажимает эту кнопку, я хочу сделать две вещи.
- Видеоплеер 2 будет установлен как картинка в картинке, а
- Видеоплеер 1 будет установлен как полноэкранный.
Я могу сделать либо полноэкранный, либо картинку в картинке, но не могу сделать полноэкранный и картинка в картинке вместе. Выдает ошибку следующим образом:
Не удалось выполнить 'requestFullscreen' для 'Element': API может быть инициирован только жестом пользователя.
Uncaught (в обещании) TypeError: полноэкранная ошибка
Я использую jQuery, и вот мой пример кода:
$('.enter-full-screen').click(event => {
event.stopImmediatePropagation();
event.stopPropagation();
let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
pipResponse.then(() => {
$('#video-player-1')[0].requestFullscreen() // Note: I am using a browser prefixes
.then(/* ... */)
.catch(/* ... */);
})
});
Обновление: 07.01.2020: Я пробовал запросить оба одновременно, но это не так работать тоже. Он работает только для одного, который я запрашиваю первым.
let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
let fullscreenResponse = $('#video-player-1')[0].requestFullscreen();
Promise.all([pipResponse, fullscreenResponse])
.then(/* code */)
.catch(/* code */);
В этом случае работает только pip, и полноэкранный запрос выдает ошибку. Если я сначала запрашиваю полноэкранный режим, то работает только полноэкранный режим - pip выдает ошибку.
Я попытался с помощью jQuery trigger('click')
, чтобы автоматы c вызвали другое событие щелчка вместе с одним. Работает только для одного (pip или fullscreen), НО НЕ РАБОТАЕТ ВМЕСТЕ!
Я очень ценю вашу помощь.