Est-il possible de rendre la vidéo HTML5 en plein écran?
Est-il possible de lire une vidéo en plein écran à l'aide de la balise HTML5 <video>?
Et si cela n’est pas possible, est-ce que quelqu'un sait s’il ya une raison pour cette décision?
HTML 5 ne fournit aucun moyen de créer une vidéo en plein écran, mais le parallèle spécification en plein écran fournit la méthode requestFullScreen qui permet de placer des éléments arbitraires (y compris les éléments <video>) en plein écran.
Il a support expérimental dans plusieurs navigateurs .
Réponse originale:
D'après le spécifications HTML5 (au moment de la rédaction de cet article: juin 2009):
Les agents d'utilisateur ne doivent pas fournir une API publique pour que les vidéos soient affichées en plein écran. Un script, associé à un fichier vidéo soigneusement conçu, pourrait amener l'utilisateur à penser qu'un dialogue système-modal a été affiché et à demander à l'utilisateur un mot de passe. Il existe également un risque de "simple" contrariété, les pages lançant des vidéos en plein écran lorsque des liens sont cliqués ou des pages consultées. Au lieu de cela, des fonctionnalités d'interface spécifiques à l'agent d'utilisateur peuvent être fournies pour permettre facilement à l'utilisateur d'obtenir un mode de lecture plein écran.
Les navigateurs peuvent fournir une interface utilisateur, mais ne devraient pas en fournir une programmable.
Notez que l'avertissement ci-dessus a depuis été supprimé de la spécification.
La plupart des réponses ici sont obsolètes.
Il est maintenant possible d'amener n'importe quel élément en plein écran en utilisant Fullscreen API , bien que ce soit toujours un désastre, car vous ne pouvez pas simplement appeler div.requestFullScreen() dans tous les navigateurs, mais vous devez utiliser un préfixe spécifique au navigateur. méthodes.
J'ai créé un simple wrapper screenfull.js qui facilite l'utilisation de l'API Fullscreen.
Le support actuel du navigateur est:
- Chrome 15+
- Firefox 10+
- Safari 5.1+
Notez que de nombreux navigateurs mobiles ne semblent pas prendre en charge = option plein écran .
Safari le supporte à travers webkitEnterFullscreen.
Chrome devrait le supporter puisqu'il s'agit également de WebKit, mais les erreurs sont résolues.
Chris Blizzard de Firefox a déclaré qu'il sortait avec sa propre version du mode plein écran qui permettra à tout élément de passer en mode plein écran. par exemple. Toile
Philip Jagenstedt de Opera dit qu'ils le soutiendront dans une version ultérieure.
Oui, la spécification vidéo HTML5 indique de ne pas prendre en charge le plein écran, mais puisque les utilisateurs le souhaitent et que tous les navigateurs le prennent en charge, les spécifications changent.
webkitEnterFullScreen();
Ceci doit être appelé sur l'élément de balise video, par exemple, pour afficher en plein écran la première balise video de la page, utilisez:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Remarque: cette réponse est obsolète et n'est plus pertinente.
De nombreux navigateurs Web modernes ont mis en œuvre une API FullScreen qui vous permet d'activer certains éléments HTML en mode plein écran. C'est vraiment génial pour afficher des médias interactifs comme des vidéos dans un environnement totalement immersif.
Pour que le bouton plein écran fonctionne, vous devez configurer un autre écouteur d'événement qui appellera la fonction requestFullScreen() lors du clic sur le bouton. Pour vous assurer que cela fonctionnera sur tous les navigateurs pris en charge, vous devrez également vérifier si la requestFullScreen() est disponible et vous replier sur les versions à préfixe du fournisseur (mozRequestFullScreen et webkitRequestFullscreen) si ce n'est pas le cas.
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Référence: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Référence: - http: //blog.teamtreehouse. com/construction-contrôles-personnalisés-pour-html5-videos
Je pense que si nous voulons avoir un moyen ouvert de voir des vidéos dans nos navigateurs sans plugins sources fermés (et toutes les violations de sécurité qui viennent avec l'historique du plugin flash ...). Le tag doit trouver un moyen d'activer le plein écran. Nous pouvons le gérer comme le flash: pour le faire en plein écran, il faut l'activer par un clic gauche avec votre souris et rien d'autre, je veux dire qu'il n'est pas possible de lancer ActionScript plein écran lors du chargement d’un flash par exemple.
J'espère avoir été assez clair: après tout, je ne suis qu'un étudiant français en informatique, pas un poète anglais :)
À plus!
De CSS
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
Un moyen programmable de passer en mode plein écran fonctionne maintenant à la fois dans Firefox et dans Chrome (dans leurs dernières versions). La bonne nouvelle est qu’une spécification a été ébauchée ici:
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
Vous devrez toujours vous occuper des préfixes des fournisseurs pour le moment, mais tous les détails de la mise en œuvre sont suivis sur le site MDN:
Vous pouvez modifier la largeur et la hauteur à 100%, mais cela ne couvrira pas le navigateur chrome ni le shell OS.
La décision de conception est due au fait que HTML habite la fenêtre du navigateur. Les plugins Flash ne sont pas dans la fenêtre, ils peuvent donc être affichés en plein écran.
Cela a du sens, sinon vous pourriez créer des balises img couvrant le shell ou des balises h1 de manière à ce que tout l’écran soit une lettre.
Ceci est supporté dans WebKit via webkitEnterFullscreen .
Firefox 3.6 a une option plein écran pour les vidéos HTML5, faites un clic droit sur la vidéo et sélectionnez "plein écran".
Les dernières nightlies Webkit prennent également en charge la vidéo plein écran HTML5, essayez le lecteur Sublime avec la dernière version nocturne et maintenez les touches Cmd/Ctrl enfoncées tout en sélectionnant l'option plein écran.
Je suppose que Chrome/Opera prendra également en charge quelque chose comme ceci. Espérons que IE9 supportera également la vidéo HTML5 en plein écran.
Non, il n'est pas possible d'avoir une vidéo en plein écran au format HTML 5. Si vous voulez connaître les raisons, vous avez de la chance, car la bataille pour le plein écran se dispute actuellement. Voir liste de diffusion WHATWG et recherchez le mot "vidéo". J'espère personnellement qu'ils fournissent une API plein écran en HTML 5.
Une solution alternative serait d'avoir à navigateur simplement fournir cette option dans le menu contextuel. Pas besoin de Javascript pour le faire, même si je pouvais voir quand cela serait utile.
Dans l’intervalle, une solution alternative consisterait simplement à maximiser la fenêtre (Javascript peut fournir des dimensions d’écran), puis à maximiser la vidéo qu’elle contient. Essayez-le et voyez simplement si les résultats sont acceptables pour vos utilisateurs.
La solution complète:
function bindFullscreen(video) {
$(video).unbind('click').click(toggleFullScreen);
}
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
La vidéo HTML 5 passe en plein écran dans la dernière version nocturne de Safari, bien que je ne sache pas comment elle est techniquement accomplie.