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
video
html5-video
fullscreen
nicudotro
la source
la source
Réponses:
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
requestFullScreen
mé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 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 source
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:
Notez que de nombreux navigateurs mobiles ne semblent pas encore prendre en charge une option plein écran .
la source
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.
la source
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:
Remarque: cette réponse est obsolète et n'est plus pertinente.
la source
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 lerequestFullScreen()
est disponible et revenir aux versions préfixées par le fournisseur (mozRequestFullScreen
etwebkitRequestFullscreen
) si ce n'est pas le cas.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
la source
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!
la source
De CSS
la source
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
la source
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.
la source
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.
la source
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.
la source
Ceci est pris en charge dans WebKit via webkitEnterFullscreen .
la source
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 source
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 source
La solution complète:
la source
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à.la source
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.la source
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?
la source
Depuis le canal de développement de Chrome 11.0.686.0 , Chrome dispose désormais d'une vidéo en plein écran.
la source
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.
la source
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
la source