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.
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)
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?
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.
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).