{"id":182,"date":"2012-11-14T23:39:19","date_gmt":"2012-11-14T23:39:19","guid":{"rendered":"http:\/\/blog.luisrodriguez.pe\/?p=182"},"modified":"2013-01-09T23:35:27","modified_gmt":"2013-01-09T23:35:27","slug":"api-fullscreen-con-html5","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/","title":{"rendered":"Api fullscreen con html5"},"content":{"rendered":"

Ya hace mas de 1 a\u00f1o youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API\u00a0Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto funciona como nativo en los smartphone.<\/p>\n

como es una tecnologia experimental pueda que tenga cambios en nuevas versiones de navegadores ahora funciona en motores Gecko\u00a0 y WebKit<\/p>\n

Standar -> requestFullScreen()<\/p>\n

Gecko -> element.mozRequestFullScreen()<\/p>\n

WebKit -> element.webkitRequestFullscreen().<\/p>\n

 <\/p>\n

con este script ya tenemos para hacer el fullscreen<\/p>\n\n

function<\/span> launchFullscreen(<\/span>element)<\/span> {<\/span>\n\/\/comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit<\/span>\nif<\/span>(<\/span>element.requestFullScreen<\/span>)<\/span> {<\/span>\nelement.requestFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span> else<\/span> if<\/span>(<\/span>element.mozRequestFullScreen<\/span>)<\/span> {<\/span>\nelement.mozRequestFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span> else<\/span> if<\/span>(<\/span>element.webkitRequestFullScreen<\/span>)<\/span> {<\/span>\nelement.webkitRequestFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>\n}<\/span>\n\/\/comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit<\/span>\nfunction<\/span> cancelFullscreen(<\/span>)<\/span> {<\/span>\nif<\/span>(<\/span>document.cancelFullScreen<\/span>)<\/span> {<\/span>\ndocument.cancelFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span> else<\/span> if<\/span>(<\/span>document.mozCancelFullScreen<\/span>)<\/span> {<\/span>\ndocument.mozCancelFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span> else<\/span> if<\/span>(<\/span>document.webkitCancelFullScreen<\/span>)<\/span> {<\/span>\ndocument.webkitCancelFullScreen<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>\n}<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
en boton para llamar la accion seria por ejemplo asi<\/p>\n\n
<button onclick="launchFullscreen(document.getElementById('noticias'));">Launch Fullscreen<\/button><\/pre><\/td><\/tr><\/table><\/div>\n\n
aqui estoy estoy colocando en fullscreen todo el contenido de elemento con la id noticias tambien agregue la funcion para cancelar el fullscreen con una funcion javascript que debe estar en algun boton dentro del elemento noticias.<\/p>\n
El soporte de esta API a la fecha de hoy
\nEscritorio<\/em><\/p>\n\n\n\n\n\n
Feature<\/th>\nChrome<\/th>\nFirefox (Gecko)<\/th>\nInternet Explorer<\/th>\nOpera<\/th>\nSafari<\/th>\n<\/tr>\n
Basic support<\/td>\n15 -webkit<\/span><\/td>\n9.0 (9.0) -moz<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n5.0 -webkit<\/span><\/td>\n<\/tr>\n
fullScreenEnabled<\/code><\/td>\n20 -webkit<\/span><\/td>\n10.0 (10.0) -moz<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n5.1 -webkit<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Mobil<\/em><\/p>\n\n\n\n\n\n
Feature<\/th>\nAndroid<\/th>\nFirefox Mobile (Gecko)<\/th>\nIE Mobile<\/th>\nOpera Mobile<\/th>\nSafari Mobile<\/th>\n<\/tr>\n
Basic support<\/td>\n?<\/span><\/td>\n9.0 (9.0)-moz<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n<\/tr>\n
fullScreenEnabled<\/code><\/td>\n?<\/span><\/td>\n10.0 (10.0) moz<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n?<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"Ya hace mas de 1 a\u00f1o youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API\u00a0Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto[…]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7],"tags":[],"class_list":["post-182","post","type-post","status-publish","format-standard","hentry","category-html5","category-javascript"],"yoast_head":"\nApi fullscreen con html5 - Blog Luis Rodriguez<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Api fullscreen con html5 - Blog Luis Rodriguez\" \/>\n<meta property=\"og:description\" content=\"Ya hace mas de 1 a\u00f1o youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API\u00a0Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-14T23:39:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-09T23:35:27+00:00\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Api fullscreen con html5\",\"datePublished\":\"2012-11-14T23:39:19+00:00\",\"dateModified\":\"2013-01-09T23:35:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\"},\"wordCount\":201,\"commentCount\":0,\"articleSection\":[\"HTML5\",\"JAVASCRIPT\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\",\"name\":\"Api fullscreen con html5 - Blog Luis Rodriguez\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"datePublished\":\"2012-11-14T23:39:19+00:00\",\"dateModified\":\"2013-01-09T23:35:27+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Api fullscreen con html5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Api fullscreen con html5 - Blog Luis Rodriguez","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/","og_locale":"es_ES","og_type":"article","og_title":"Api fullscreen con html5 - Blog Luis Rodriguez","og_description":"Ya hace mas de 1 a\u00f1o youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API\u00a0Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto[...]","og_url":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2012-11-14T23:39:19+00:00","article_modified_time":"2013-01-09T23:35:27+00:00","author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Api fullscreen con html5","datePublished":"2012-11-14T23:39:19+00:00","dateModified":"2013-01-09T23:35:27+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/"},"wordCount":201,"commentCount":0,"articleSection":["HTML5","JAVASCRIPT"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/","url":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/","name":"Api fullscreen con html5 - Blog Luis Rodriguez","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"datePublished":"2012-11-14T23:39:19+00:00","dateModified":"2013-01-09T23:35:27+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/api-fullscreen-con-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Api fullscreen con html5"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":13,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/182\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/182\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}