web-dev-qa-db-fra.com

Comment faire une vidéo en plein écran quand elle est placée dans une iframe?

J'utilise les paramètres par défaut de mon lecteur mediaelement.js et mon initialisation est très basique: $('video').mediaelementplayer();

Ma question est la suivante: Est-il possible de passer en mode plein écran lorsque la vidéo est intégrée à un iframe? une limitation de html ou y at-il un moyen de le contourner?

La structure générale ressemble à ceci:

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

Merci!

EDIT: Il semble que cela est spécifique au joueur. L'implémentation html5 <video> par défaut maximise parfaitement le mode plein écran, même à l'intérieur d'un iframe.

htmliframemediaelement.js
18
Jazon

Je suis tombé par hasard sur video.js:

video.js dans une fenêtre modale: le plein écran ne fonctionne pas

Et la réponse est d'ajouter ces attributs à iframe: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (Pas de support IE cependant)

39
Jazon

J'utilise ce morceau de code afin de savoir si une vidéo est entrée ou non en mode plein écran:

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();
}

Je suppose que vous pouvez avoir cet appel une fonction sur la page parente pour agrandir l'iframe?

1
Ab_c

Mon client se contentait déjà de la largeur limitée de la vidéo «plein écran» - c’était juste les barres noires au-dessus et au-dessous dont je devais me débarrasser. (dans mon cas, les dimensions de l’iFrame étaient de 945 × 1500).

Ceci, je pourrais résoudre purement avec un peu de 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) */
}

Certes, il s'agit d'une solution plutôt limitée, qui dépend fortement de la taille de la vidéo (et de la cohérence de la taille de plusieurs vidéos) ainsi que de la couleur d'arrière-plan. Mais cela peut fonctionner pour vous aussi.

0
WoodrowShigeru

Voici une solution de "piratage" qui accélérera le chargement de votre page.

1) Créez une image (généralement une capture d'écran de la vidéo) à la place de l'iFrame.

2) Liez un gestionnaire d’événements click à l’image afin qu’il crée un iFrame aux dimensions souhaitées. (Vous pouvez baser ces dimensions sur la taille de la fenêtre du client).

0
Brad M