Est-il possible de rendre la vidéo HTML5 en plein écran?

Question

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 à cette décision?

Answer 1

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

Il dispose du prise en charge expérimentale dans plusieurs navigateurs .

Réponse originale:

Extrait de la spécification HTML5 (à l'adresse le temps de l'écriture: Juin '09):

  

Les agents utilisateurs ne doivent pas fournir de   API publique pour afficher des vidéos   plein écran. Un script, combiné avec un   fichier vidéo soigneusement conçu, pourrait   inciter l'utilisateur à penser à   dialogue système-modal avait été montré,   et demandez à l'utilisateur un mot de passe.   Il y a aussi le danger de & "Simple &";   ennui, avec le lancement des pages   vidéos en plein écran lorsque les liens sont   cliqué ou pages parcourues. Au lieu,   fonctionnalités spécifiques à l'interface de l'agent utilisateur   peut être prévu pour permettre facilement la   utilisateur pour obtenir une lecture en plein écran   mode.

Les navigateurs peuvent fournir une interface utilisateur, mais pas une interface programmable.

Notez que l'avertissement ci-dessus a depuis été supprimé de la spécification.

Answer 2

La plupart des réponses ici sont obsolètes.

Il est maintenant possible d'importer n'importe quel élément en plein écran à l'aide de la API plein écran , Bien que ce soit toujours un désastre, car vous ne pouvez pas appeler div.requestFullScreen() dans tous les navigateurs, vous devez utiliser des méthodes préfixées spécifiques au navigateur.

J'ai créé un emballage simple, screenfull.js , qui facilite l'utilisation du mode plein écran. API.

La prise en charge actuelle du navigateur est la suivante:

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

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

Answer 3

Safari le prend en charge par webkitEnterFullscreen.

Chrome devrait le prendre en charge car 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 permet à tout élément de passer en mode plein écran. par exemple. Toile

Philip Jagenstedt de Opera a annoncé qu'il le prendrait en charge 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, la spécification change.

Answer 4

webkitEnterFullScreen();

Ceci doit être appelé sur la balise video ele & # 173; ment, par exemple, pour masquer & # 173; masquer 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.

Answer 5

Je pense que si nous voulons avoir un moyen ouvert de visionner 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 faire le plein écran, il faut l’activer avec 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:)

Voir Ya!

Answer 6

De nombreux navigateurs Web modernes ont implémenté une API FullScreen qui vous permet d'activer certains éléments HTML en mode plein écran. C’est vraiment bien 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énements qui appellera la fonction requestFullScreen() 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 mozRequestFullScreen est disponible et utiliser les versions préfixées du fournisseur (webkitRequestFullscreen et <=>) 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- contrôles-pour-html5-vidéos

Answer 7

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é ébauchée ici:

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

Vous devrez toujours gérer les préfixes du fournisseur pour l'instant, mais tous les détails de la mise en œuvre sont suivis sur le site MDN:

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

Answer 8

À partir 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;
}

Answer 9

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

La décision de conception tient au fait que HTML habite 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 couvrant le shell ou des balises h1 de sorte que tout l'écran soit une lettre.

Answer 10

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. Consultez la liste de diffusion du WHATWG et recherchez la mot " vidéo " ;. J'espère personnellement qu'ils fournissent une API plein écran en HTML 5.

Answer 11

Firefox 3.6 propose une option plein écran pour les vidéos HTML5. Cliquez avec le bouton droit de la souris sur la vidéo et sélectionnez "Plein écran".

Les dernières boîtes de nuit 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. J'espère que IE9 prendra également en charge la vidéo plein écran HTML5.

Answer 12

Ceci est pris en charge dans WebKit via webkitEnterFullscreen .

Answer 13

Une autre solution consisterait à obliger le navigateur à simplement fournir cette option dans le menu contextuel. Pas besoin de Javascript pour le faire, bien que je sache quand cela serait utile.

En attendant, 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.

Answer 14

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.

Answer 15

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

Answer 16

Oui. Eh bien, ce qui se passe avec la vidéo HTML5, c’est que vous venez de mettre la balise <video> et que le navigateur donne sa propre interface utilisateur, et donc la possibilité de visualiser en plein écran. Cela rend vraiment la vie beaucoup plus agréable pour nous, utilisateurs, de ne pas avoir à voir le & "Art &"; Certains développeurs utilisant Flash pourraient faire :) Cela ajoute également de la cohérence à la plate-forme, ce qui est agréable.

Answer 17

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

1) les échappements vous sortent toujours du mode plein écran     (Cela ne s'applique pas à la saisie manuelle du plein écran au moyen de la touche f11)

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

3) bloque l'action plein écran par défaut, comme cela a été fait pour les fenêtres contextuelles et la base de données locale en html5, ainsi que pour les api d'emplacement, etc.,

.

Je ne vois aucun problème avec cette conception. Quelqu'un pense-t-il que j'ai raté quelque chose?

Answer 18

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

Answer 19

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

Answer 20

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

1. Utilisez javascript pour définir l'attribut 'src' de la vidéo en plein écran sur l'attribut 'src' des vidéos plus petites
2. Définissez video.currentTime sur la vidéo plein écran pour qu'il soit identique à la petite vidéo.
3. Utilisez css 'display: none' pour masquer la petite vidéo et afficher la grande avec le via 'position: absolute' et 'z-index: 1000' ou quelque chose de très haut.