Existe-t-il un moyen de créer un plein écran vidéo HTML5?

Existe-t-il un moyen de lire une vidéo en plein écran à l'aide de la <video>balise HTML5 ?

Et si cela n'est pas possible, est-ce que quelqu'un sait s'il y a une raison à cette décision?

HTML 5 ne fournit aucun moyen de créer une vidéo en plein écran, mais la spécification Plein écran parallèle fournit la requestFullScreenméthode qui permet à des éléments arbitraires (y compris des <video>éléments) d'être rendus en plein écran.

Il a un support expérimental dans un certain nombre de navigateurs .

Réponse originale:

À partir de la spécification HTML5 (au moment de la rédaction: juin 2009):

Les agents utilisateurs ne doivent pas fournir une API publique pour que les vidéos s'affichent en plein écran. Un script, combiné à un fichier vidéo soigneusement conçu, pourrait faire croire à l'utilisateur qu'une boîte de dialogue modale du système a été affichée et inviter l'utilisateur à entrer un mot de passe. Il y a aussi le danger d'un «simple» ennui, avec des pages qui lancent des vidéos en plein écran lorsque des liens sont cliqués ou des pages parcourues. Au lieu de cela, des fonctionnalités d'interface spécifiques à l'agent 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 doivent 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 de mettre n'importe quel élément en plein écran à l'aide de l' API Plein écran , bien que ce soit toujours un gâchis car vous ne pouvez pas simplement appeler div.requestFullScreen()tous les navigateurs, mais devez utiliser des méthodes préfixées spécifiques au navigateur.

J'ai créé un simple wrapper screenfull.js qui facilite l'utilisation de l'API Fullscreen.

La prise en charge actuelle du navigateur est:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

Notez que de nombreux navigateurs mobiles ne semblent pas encore prendre en charge une option plein écran .

Safari le prend en charge webkitEnterFullscreen.

Chrome devrait le prendre en charge car il s'agit également de WebKit, mais les erreurs se produisent.

Chris Blizzard de Firefox déclaré qu'ils sortiraient avec leur propre version du plein écran qui permettra à n'importe quel élément d'aller en plein écran. par exemple toile

Philip Jagenstedt d' Opéra dit qu'ils le soutiendront dans une version ultérieure.

Oui, la spécification vidéo HTML5 dit de ne pas prendre en charge le plein écran, mais comme les utilisateurs le souhaitent et que chaque navigateur le supportera, la spécification changera.

webkitEnterFullScreen();

Cela doit être appelé sur l'élément de balise vidéo, par exemple, pour afficher en plein écran la première balise vidéo 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 implémenté une API FullScreen qui vous permet de donner le focus plein écran à certains éléments HTML. C'est vraiment génial pour afficher des médias interactifs comme des vidéos dans un environnement entièrement immersif.

Pour que le bouton plein écran fonctionne, vous devez configurer un autre écouteur d'événements qui appellera la requestFullScreen()fonction lorsque vous cliquerez sur le bouton. Pour vous assurer que cela fonctionnera sur tous les navigateurs pris en charge, vous devrez également vérifier si le requestFullScreen()est disponible et revenir aux versions préfixées par le fournisseur ( mozRequestFullScreenet 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/building-custom-controls-for-html5 -vidéos

Je pense que si nous voulons avoir un moyen ouvert de visionner des vidéos dans nos navigateurs sans aucun plug-in de source fermée (et toutes les failles de sécurité qui accompagnent l'historique du plugin flash ...). La balise doit trouver un moyen d'activer le plein écran. Nous pourrions le gérer comme le fait le flash: pour faire du plein écran, il doit être activé par un clic gauche avec votre souris et rien d'autre, je veux dire qu'il n'est pas possible par ActionScript de se lancer plein écran au 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 faire du plein écran fonctionne maintenant dans Firefox et Chrome (dans leurs dernières versions). La bonne nouvelle est qu'une spécification a été rédigée ici:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Vous devrez toujours gérer les préfixes de fournisseur pour le moment, mais tous les détails de mise en œuvre sont suivis dans le site MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Vous pouvez modifier la largeur et la hauteur à 100%, mais cela ne couvrira pas le chrome du navigateur ou le shell du système d'exploitation.

La décision de conception est due au fait que le HTML vit dans la fenêtre du navigateur. Les plugins Flash ne sont pas à l'intérieur de la fenêtre, ils peuvent donc passer en plein écran.

Cela a du sens, sinon vous pouvez créer des balises img qui couvrent le shell, ou créer des balises h1 pour que tout l'écran soit une lettre.

Non, il n'est pas possible d'avoir une vidéo plein écran en html 5. Si vous voulez en connaître les raisons, vous avez de la chance car la bataille d'arguments pour le plein écran se déroule en ce moment. Consultez la liste de diffusion WHATWG et recherchez le mot «vidéo». J'espère personnellement qu'ils fournissent une API plein écran en HTML 5.

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 derniers nightlies Webkit prennent également en charge la vidéo HTML5 plein écran, essayez le lecteur Sublime avec la dernière nuit et maintenez Cmd / Ctrl tout en sélectionnant l'option plein écran.

Je suppose que Chrome / Opera supportera également quelque chose comme ça. Espérons que IE9 prendra également en charge la vidéo HTML5 plein écran.

Ceci est pris en charge dans WebKit via webkitEnterFullscreen .

Une solution alternative serait de devoir simplement fournir au navigateur cette option dans le menu contextuel. Pas besoin d'avoir Javascript pour faire ça, même si je pouvais voir quand cela serait utile.

En attendant, une solution alternative serait simplement de maximiser la fenêtre (Javascript peut fournir les dimensions de l'écran) puis de maximiser la vidéo qu'elle contient. Essayez-le et voyez simplement si les résultats sont acceptables pour vos utilisateurs.

La vidéo HTML 5 passe en plein écran dans la dernière version nocturne de Safari, même si je ne sais pas comment cela est techniquement accompli.

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

Si vous avez la possibilité de définir votre site en tant qu'application Web progressive (PWA), il existe également une option à utiliser display: "fullscreen"sous manifest.json . Mais cela ne fonctionnera que si l'utilisateur ajoute / installe votre application Web sur l'écran d'accueil et l'ouvre à partir de là.

Oui. Eh bien, ce qui se passe avec la vidéo HTML5, c'est que vous venez de mettre la <video>balise et le navigateur donnera sa propre interface utilisateur, et donc la possibilité de visualiser en plein écran. Cela rend vraiment la vie bien meilleure pour nous utilisateurs de ne pas avoir à voir «l'art» que certains développeurs jouant avec Flash pourraient faire :) Cela ajoute également de la cohérence à la plate-forme, ce qui est bien.

c'est simple, tous les problèmes peuvent être résolus comme ça,

1) que la fonction d'échappement vous fasse toujours sortir du mode plein écran (cela ne s'applique pas à la saisie manuelle du plein écran via f11)

2) afficher temporairement une petite bannière indiquant que le mode vidéo plein écran est entré (par le navigateur)

3) bloquer l'action plein écran par défaut, tout comme cela a été fait pour les pop-ups et la base de données locale en html5 et emplacement api et etc., etc.

je ne vois aucun problème avec cette conception. quelqu'un pense que j'ai raté quelque chose?

Depuis le canal de développement de Chrome 11.0.686.0 , Chrome dispose désormais d'une vidéo en plein écran.

Vous pouvez le faire si vous dites à l'utilisateur d'appuyer sur F11 (plein écran pour de nombreux navigateurs) et que vous mettez la vidéo sur tout le corps de la page.

Si aucune de ces réponses ne fonctionne (comme ce n'était pas le cas pour moi), vous pouvez créer deux vidéos. Un pour la taille normale et un autre pour la taille plein écran. Lorsque vous souhaitez passer en plein écran

1. Utilisez javascript pour définir l'attribut 'src' de la vidéo plein écran sur l'attribut 'src' des vidéos plus petites
2. Définissez la valeur video.currentTime sur la vidéo plein écran pour qu'elle soit la même que la petite vidéo.
3. Utilisez css 'display: none' pour masquer la petite vidéo et afficher la grande avec la via 'position: absolute' et 'z-index: 1000' ou quelque chose de vraiment élevé.