Как сделать видео полноэкранным, когда оно помещено внутри iframe?

Я использую настройки по умолчанию для моего mediaelement.JS player, и моя инициализация очень проста: $('video').mediaelementplayer();

мой вопрос: Можно ли полноэкранный режим проигрывателя, когда видео встроено в iframe? Когда я нажимаю полноэкранный режим, видео максимизируется до iframe, но не до всего экрана. Это ограничение html или есть способ обойти его?

общая структура выглядит это:

<!DOCTYPE html>
<html>
  <head />
  <body>
    <iframe>
      <!DOCTYPE html>
      <html>
        <head />
        <body>
          *My Video Here <video> ...*
        <body>
      </html>
    </iframe>
  </body>
</html>

спасибо!

изменить: Похоже, это специфический игрок. По умолчанию в HTML5 <video> реализация максимизирует полноэкранный режим просто отлично, даже внутри iframe.

17
html iframe mediaelement.js

4 ответов

наткнулся на это на видео.js:

видео.js внутри модального окна: полный экран не работает

и ответ заключается в добавлении этих атрибутов в iframe: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (нет поддержки IE, хотя)

36

Я использую этот бит кода, чтобы отслеживать, вошло ли видео в / из полноэкранного режима:

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
    // Your code here
    this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
    // Your code here
    this.exitFullScreen_org();
}

Я предполагаю, что вы можете вызвать эту функцию на родительской странице, чтобы увеличить iframe?

1

вот" взломать " решение, которое даже сделает вашу страницу загружаться быстрее.

1) создайте изображение (обычно скриншот видео) вместо iFrame.

2) свяжите обработчик событий click с изображением, чтобы он создал iFrame для требуемых размеров. (Вы можете основывать эти измерения на размере окна клиента).

0

мой клиент уже удовлетворился ограниченной шириной "полноэкранного" видео – это были только черные полосы выше и ниже, от которых я должен был избавиться. (в моем случае размеры iFrame были 945×1500).

Это, я мог бы исправить чисто с небольшим количеством CSS.

.mejs-container-fullscreen {
    background-color: #fff !important;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    height: 530px !important;
    top: 500px !important;
}

.mejs-container.mejs-container-fullscreen .mejs-controls {
    bottom: auto !important;
    top: 1000px !important; /* video top + video height - controls height (30px) */
}

по общему признанию, это довольно ограниченное решение, и оно сильно зависит от размера видео (и согласованности размера для нескольких видео), а также цвета фона. Но это может сработать для вас, тоже.

0