Y a-t-il un moyen de faire la vidéo HTML5 en plein écran?

la plupart des réponses sont périmées.

il est maintenant possible d'introduire n'importe quel élément en plein écran en utilisant le fullscreen API , bien que ce soit encore un gâchis car vous ne pouvez pas simplement appeler div.requestFullScreen() dans tous les navigateurs, mais devez utiliser des méthodes préfixées spécifiques au navigateur.

j'ai créé un emballage simple plein à craquer.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 encore supporter l'option plein écran .

Safari le supporte par webkitEnterFullscreen .

Chrome devrait le supporter car C'est aussi WebKit, mais il y a des erreurs.

Chris Blizzard de Firefox dit qu'ils sortent avec leur propre version de fullscreen qui permettra à tout élément de passer à fullscreen. par exemple Toile

Philippe Jagenstedt de Opéra dit qu'ils vont le soutenir dans une version ultérieure.

Oui, la spécification vidéo HTML5 dit de ne pas prendre en charge le plein écran, mais puisque les utilisateurs le veulent, et que chaque navigateur va le prendre en charge, la spécification va changer.

webkitEnterFullScreen();

cela doit être appelé sur l'élément de balise vidéo, par exemple, pour fullscreen la première balise vidéo sur la page Utiliser:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

avis: cette réponse est périmée et n'est plus pertinente.

je pense que si nous voulons avoir une voie ouverte pour voir des vidéos dans nos navigateurs sans plugins source fermés (et toutes les brèches de sécurité qui vient avec l'histoire du plugin flash...). La balise doit trouver un moyen d'activer le plein écran.. Nous pourrions le gérer comme le fait flash: pour faire fullscreen, 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 lancer fullscreen au chargement d'un flash par exemple.

j'espère avoir été assez clair: après tout, Je ne suis qu'un étudiant en informatique français, pas un poète anglais:)

Te Voir!

une façon programmable de faire fullscreen fonctionne maintenant à la fois 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 aurez encore à traiter avec les préfixes fournisseurs pour le moment, mais tous les détails de la mise en œuvre sont suivis dans le site MDN:

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

de nombreux navigateurs Web modernes ont mis en place une API FullScreen qui vous permet de donner la priorité plein écran à certains éléments HTML. C'est vraiment génial pour l'affichage de médias interactifs comme des vidéos dans un environnement immersif.

pour que le bouton Plein écran fonctionne, vous devez configurer un autre écouteur d'événements qui appellera la fonction requestFullScreen() lorsque le bouton est cliqué. Pour s'assurer que cela fonctionne dans tous les navigateurs pris en charge, vous allez également pour avoir besoin de vérifier si le requestFullScreen() est disponible et retomber sur les versions préfixées du vendeur ( 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/building-custom-controls-for-html5-videos

vous pouvez changer la largeur et la hauteur à 100%, mais il ne couvrira pas le navigateur chrome ou le shell OS.

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

cela a du sens, sinon vous pourriez faire des étiquettes img qui couvrent la coquille, ou faire des étiquettes h1 de sorte que l'écran entier était une lettre.

Non, il n'est pas possible d'avoir une vidéo plein écran en html 5. Si vous voulez connaître les raisons, vous êtes chanceux parce que la bataille d'argument pour fullscreen est combattue en ce moment. Voir liste de diffusion WHATWG et rechercher le mot"video". J'espère personnellement qu'ils fournissent L'API fullscreen en HTML 5.

Firefox 3.6 dispose d'une option Plein écran pour les vidéos HTML5, droit-cliquez 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 nuit et tenir Cmd / Ctrl tout en sélectionnant l'option Plein écran.

je suppose que Chrome / Opera supporte aussi quelque chose comme ça. Avec un peu de chance, IE9 supportera aussi la vidéo plein écran HTML5.

ceci est supporté dans WebKit via webkitEnterFullscreen .

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

une solution alternative serait d'avoir à navigateur simplement fournir cette option sur le menu contextuel. Il n'est pas nécessaire D'avoir Javascript pour le faire, bien que je puisse voir quand ce serait utile.

en attendant, une solution alternative serait simplement de maximiser la fenêtre (Javascript peut fournir les dimensions de l'écran) et ensuite de maximiser la vidéo à l'intérieur. Donnez-lui un coup de pouce et ensuite tout simplement voir si les résultats sont acceptables pour vos utilisateurs.

HTML 5 vidéo ne va fullscreen dans la dernière construction nocturne de Safari, bien que je ne suis pas sûr de la façon dont il 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();
                    }
            }
    }

Oui. Eh bien ce qui se passe avec la vidéo HTML5 est que vous venez de mettre la balise <video> et le navigateur donnera son propre UI, et donc la possibilité de visionnement en plein écran. Il fait vraiment la vie beaucoup mieux sur nous les utilisateurs de ne pas avoir à voir l ' "art" un certain développeur jouer avec Flash pourrait faire :) il ajoute également la cohérence de la plate-forme, qui est agréable.

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

1) Avez escape toujours vous sortir du mode fullscreen (ceci ne s'applique pas à la saisie manuelle du plein écran par f11)

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

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

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

à partir de Chrome 11.0.686.0 dev channel Chrome a maintenant la vidéo plein écran.

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

si aucune de ces réponses ne fonctionne (comme ils ne l'ont pas fait pour moi), vous pouvez configurer deux vidéos. Une pour la taille normale et une autre pour la taille Plein écran. Quand vous voulez passer à fullscreen

1. utilisez javascript pour définir l'attribut "src" de la vidéo en plein écran à l'attribut
"
2. règle la vidéo.currentTime sur le plein écran vidéo d'être le même que la petite vidéo.
3. utiliser CSS 'display: none' to masquez la petite vidéo et affichez la grande avec la via 'position:absolute' et 'z-index:1000' ou quelque chose de vraiment haut.