{"id":1458,"date":"2012-12-11T20:25:59","date_gmt":"2012-12-11T19:25:59","guid":{"rendered":"http:\/\/canaltic.com\/blog\/?p=1458"},"modified":"2017-06-05T16:20:45","modified_gmt":"2017-06-05T15:20:45","slug":"video-en-html5","status":"publish","type":"post","link":"https:\/\/canaltic.com\/blog\/?p=1458","title":{"rendered":"Video en HTML5"},"content":{"rendered":"<p>Es posible incorporar un v\u00eddeo al art\u00edculo de un espacio educativo (blog, wiki, moodle) usando HTML5. \u00a0En Internet se dispone de distintos reproductores de v\u00eddeos dise\u00f1ados en esta tecnolog\u00eda y que representan una excelente alternativa a Flash. De esta forma resultar\u00e1n accesibles desde cualquier tipo de dispositivo: tel\u00e9fono m\u00f3vil, tableta, notebook, pc, etc. En esta entrada se proponen algunos modelos gratuitos que se pueden descargar desde Internet. Se trata de variantes de funcionamiento (Javascript) y estilo gr\u00e1fico (CSS3) al elemento <em><strong>&lt;video&gt;<\/strong><\/em> \u00a0ofrecido por defecto en el lenguaje HTML5.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1514\" title=\"V\u00eddeo en HTML5\" src=\"http:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml501.jpg\" alt=\"\" width=\"400\" height=\"100\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml501.jpg 400w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml501-300x75.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h1>Demos<\/h1>\n<ul>\n<li><a class=\"thickbox\" title=\"video HTML5\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/default\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=485&amp;width=876\">video HTML5<\/a><\/li>\n<li><a class=\"thickbox\" title=\"MediaElement.js\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/me\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=390&amp;width=640\">MediaElement.js<\/a><\/li>\n<li><a class=\"thickbox\" title=\"Video.js\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/videojs\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=270&amp;width=640\">Video.js<\/a><\/li>\n<li><a class=\"thickbox\" title=\"jPlayer\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jplayer\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=600&amp;width=660\">jPlayer<\/a><\/li>\n<li><a class=\"thickbox\" title=\"LeanBack\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/leanback\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=480&amp;width=640\">leanBack<\/a><\/li>\n<li><a class=\"thickbox\" title=\"OSMPlayer\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/osmplayer\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=600&amp;width=800\">OSM Player<\/a><\/li>\n<li><a class=\"thickbox\" title=\"Projekktor\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/projekktor\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=450&amp;width=800\">Projekktor<\/a><\/li>\n<li><a class=\"thickbox\" title=\"JW Player\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jwplayer\/index.html?KeepThis=false&amp;TB_iframe=false&amp;height=500&amp;width=880\">JW Media Player<\/a><\/li>\n<\/ul>\n<h1>Caracter\u00edsticas<\/h1>\n<p>La elecci\u00f3n de estas soluciones se ha basado en sus prestaciones:<\/p>\n<ul>\n<li><strong>Flexibilidad<\/strong>. Admiten la configuraci\u00f3n de un cierto repertorio de par\u00e1metros: nombre y ubicaci\u00f3n del MP4, apariencia, color, reproducci\u00f3n continua, aleatoria, al inicio, etc.<\/li>\n<li><strong>Control<\/strong>. Ofrecen al lector de la p\u00e1gina web una consola que le permite controlar la reproducci\u00f3n del v\u00eddeo.<\/li>\n<li><strong>Integraci\u00f3n<\/strong>. Proporcionan un sistema f\u00e1cil, limpio y elegante para integrar un v\u00eddeo en una p\u00e1gina web.<\/li>\n<li><strong>HMTL5<\/strong>. Se trata de soluciones alternativas a la tecnolog\u00eda Flash. Para su correcta visualizaci\u00f3n es necesario que el navegador web cliente admita la ejecuci\u00f3n de Javascript lo cual suele venir establecido por defecto.<\/li>\n<li><strong>Fiabilidad<\/strong>. Su funcionamiento se ha comprobado robusto y fiable.<\/li>\n<li><strong>Facilidad<\/strong>. La simplicidad de configuraci\u00f3n y personalizaci\u00f3n de sus par\u00e1metros.<\/li>\n<li><strong>Est\u00e1ndares<\/strong>. Permiten reproducir archivos de v\u00eddeo de formatos est\u00e1ndar: MP4 y OGG.<\/li>\n<li><strong>Gratuidad<\/strong>. Se ofrecen con car\u00e1cter gratuito para un uso no comercial.<\/li>\n<\/ul>\n<h1><strong>Paso 1. Conseguir un v\u00eddeo<\/strong><\/h1>\n<p>Se puede obtener un archivo de v\u00eddeo siguiendo uno de estos procedimientos:<\/p>\n<ul>\n<li><strong>Captura de c\u00e1mara DV<\/strong>. A partir de la grabaci\u00f3n realizada con una c\u00e1mara digital DV. La captura y edici\u00f3n del v\u00eddeo se realiza con programas como <a title=\"Movie Maker\" href=\"http:\/\/explore.live.com\/windows-live-movie-maker\" target=\"_blank\" rel=\"noopener noreferrer\">Live Movie Maker<\/a> (Windows), <a title=\"Kino\" href=\"http:\/\/www.kinodv.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kino<\/a> (Ubuntu) o <a title=\"iMovie\" href=\"http:\/\/www.apple.com\/es\/ilife\/imovie\/\" target=\"_blank\" rel=\"noopener noreferrer\">iMovie<\/a> (Mac).<\/li>\n<li><strong>Fotos narradas<\/strong>. Tomando como material de partida una colecci\u00f3n de im\u00e1genes o fotos se crea un v\u00eddeo que las muestre de forma secuencial usando transiciones, efectos, textos, m\u00fasica de fondo, etc. Esta tarea se puede realizar con programas como <a title=\"Live Movie Maker\" href=\"http:\/\/explore.live.com\/windows-live-movie-maker\" target=\"_blank\" rel=\"noopener noreferrer\">Live Movie Maker<\/a> (Windows), <a title=\"Imagination\" href=\"http:\/\/sourceforge.net\/projects\/imagination\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagination<\/a> (Ubuntu), <a title=\"iMovie\" href=\"http:\/\/www.apple.com\/es\/ilife\/imovie\/\" target=\"_blank\" rel=\"noopener noreferrer\">iMovie<\/a> (Mac) o <a title=\"Picasa 3\" href=\"http:\/\/picasa.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Picasa 3<\/a>.<\/li>\n<li><strong>Banco multimedia del INTEF-MEC<\/strong>. En el repositorio del Banco multimedia del <a title=\"Banco multimedia del INTEF-MEC\" href=\"http:\/\/recursostic.educacion.es\/bancoimagenes\/web\/\" target=\"_blank\" rel=\"noopener noreferrer\">INTEF-MEC<\/a> se pueden encontrar y descargar directamente interesantes v\u00eddeos susceptibles de explotaci\u00f3n did\u00e1ctica.<\/li>\n<li><strong>Descarga de un v\u00eddeo desde un repositorio<\/strong>. En sitios web como <a title=\"Youtube\" href=\"http:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Youtube<\/a>, <a title=\"TeacherTube\" href=\"http:\/\/www.teachertube.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">TeacherTube<\/a>, <a title=\"Mediateca EducaMadrid\" href=\"http\/\/mediateca.educa.madrid.org\" target=\"_blank\" rel=\"noopener noreferrer\">Mediateca Educamadrid<\/a>, etc, aunque no se ofrece un enlace para la descarga directa del archivo de v\u00eddeo, es posible descargarlo utilizando el navegador web <a title=\"Mozilla Firefox\" href=\"http:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mozilla Firefox<\/a> con un complemento como <a title=\"Video DownloadHelper\" href=\"https:\/\/addons.mozilla.org\/es-es\/firefox\/addon\/video-downloadhelper\/\" target=\"_blank\" rel=\"noopener noreferrer\">Video DownloadHelper<\/a>. Cuando nos situamos en la p\u00e1gina de reproducci\u00f3n de un v\u00eddeo, si pulsamos en el bot\u00f3n de este complemento en la barra de herramientas del navegador, se ofrece la descarga directa de ese v\u00eddeo en formato MP4. Esta tarea permite visualizar en clase v\u00eddeos previamente descargados cuando no disponemos de conexi\u00f3n a Internet en el aula.<\/li>\n<li><strong>Descarga de un v\u00eddeo desde TV<\/strong>. Si accedes al asistente del <a title=\"PydownTV\" href=\"http:\/\/web.pydowntv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">proyecto PyDownTV<\/a> puedes pegar la URL de la p\u00e1gina donde se muestra un v\u00eddeo de \u00a0<a title=\"TVE a la carta\" href=\"http:\/\/www.rtve.es\/alacarta\/\" target=\"_blank\" rel=\"noopener noreferrer\">TVE a la carta,<\/a> <a title=\"Antena 3 Modo Sal\u00f3n\" href=\"http:\/\/www.rtve.es\/alacarta\/\" target=\"_blank\" rel=\"noopener noreferrer\">Antena3 Modo Sal\u00f3n<\/a>, Telecinco, etc. Como resultado obtendr\u00e1s la URL oculta que permite la descarga directa del v\u00eddeo. Este asistente facilita la descarga de v\u00eddeos desde los sitios de las principales televisiones espa\u00f1olas. M\u00e1s informaci\u00f3n en: <a title=\"Proyecto PyDownTV\" href=\"http:\/\/code.google.com\/p\/pydowntv\/\" target=\"_blank\" rel=\"noopener noreferrer\">Proyecto PyDownTV<\/a>.<\/li>\n<li><strong>Rippear un DVD Video<\/strong>. Mediante el programa <a title=\"DVD Decrypter\" href=\"http:\/\/www.dvddecrypter.org.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">DVD Decrypter<\/a> es posible extraer los archivos VOB que contienen las pistas de audio y v\u00eddeo de un disco DVD. Luego mediante un programa como <a title=\"DVDx\" href=\"http:\/\/www.labdv.com\/dvdx\/\" target=\"_blank\" rel=\"noopener noreferrer\">DVDx 4.0<\/a> se convierten estos ficheros VOB a un archivo de v\u00eddeo de formato DivX-XVid o MP4.<\/li>\n<\/ul>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"Video en HTML5\" src=\"http:\/\/canaltic.com\/blog\/wp-content\/uploads\/2011\/12\/jwplayer11.jpg\" alt=\"\" width=\"400\" height=\"100\" \/><\/div>\n<p>En el caso de v\u00eddeos de terceros alojados en Internet (p.e. v\u00eddeos de TV) quiz\u00e1s sea m\u00e1s interesante disponer de su URL de descarga. El reproductor HTML5 se puede configurar con esa URL y de esta forma evitamos tener que descargarlo a nuestro ordenador y subirlo a nuestro espacio web personal. En los ejemplos que se proporcionan en este art\u00edculo se utilizar\u00e1n v\u00eddeos alojados en URLs externas.<\/p>\n<p>Ejemplo:\u00a0<em>http:\/\/media5.rtve.es\/resources\/TE_SDOCUM\/mp4\/9\/9\/1318198131299.mp4<\/em><\/p>\n<p>Si disponemos de un archivo de v\u00eddeo en nuestro equipo para reproducirlo, se aconseja utilizar el programa <a title=\"Video LAN Media Player\" href=\"http:\/\/www.videolan.org\/vlc\/\" target=\"_blank\" rel=\"noopener noreferrer\">VLC Media Player<\/a>. Esta aplicaci\u00f3n ofrece unas caracter\u00edsticas muy interesantes:<\/p>\n<ul>\n<li><strong>Formatos de v\u00eddeo<\/strong>. Reproduce la mayor\u00eda de formatos de v\u00eddeo incluyendo el MP4 y OGG.<\/li>\n<li><strong>Gratuito<\/strong> y <strong>multiplataforma<\/strong>. Funciona en windows, linux,mac, etc.<\/li>\n<li><strong>Versi\u00f3n portable<\/strong>. Dispone de versi\u00f3n instalable pero tambi\u00e9n otra portable: <a title=\"VLC Portable\" href=\"http:\/\/portableapps.com\/apps\/music_video\/vlc_portable\" target=\"_blank\" rel=\"noopener noreferrer\">VLC Portable<\/a>.<\/li>\n<li><strong>Pantalla completa<\/strong>. Permite el visionado a pantalla completa pulsando la tecla de funci\u00f3n F11. Esto resulta muy \u00fatil cuando se proyecta en un aula o en una pizarra digital.<\/li>\n<li><strong>Capturas de imagen<\/strong>. Cuando se reproduce un v\u00eddeo se puede capturar una imagen instant\u00e1nea \u00a0mediante Video &gt; Capturar pantalla. De esta forma se puede crear una imagen a modo de vista previa o p\u00f3ster de un v\u00eddeo.<\/li>\n<\/ul>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"Video en HTML5\" src=\"http:\/\/canaltic.com\/blog\/wp-content\/uploads\/2011\/12\/jwplayer3.jpg\" alt=\"\" width=\"400\" height=\"100\" \/><\/div>\n<p>Para conocer el c\u00f3dec de audio y v\u00eddeo con que ha sido creado un archivo de v\u00eddeo se puede utilizar <a title=\"MediaInfo\" href=\"http:\/\/mediainfo.sourceforge.net\/es\" target=\"_blank\" rel=\"noopener noreferrer\">MediaInfo<\/a>. Basta con abrir el archivo con este programa para disponer de una completa informaci\u00f3n del mismo. Este analizador proporciona informaci\u00f3n sobre los c\u00f3decs que son necesarios tener instalados en el ordenador para que se pueda reproducir o editar aunque como se coment\u00f3 con anterioridad programas como VLC Media Player son capaces de reproducir pr\u00e1cticamente todos los formatos.<\/p>\n<h1>Paso 2. Conversi\u00f3n del v\u00eddeo a formato MP4<\/h1>\n<p>El formato de archivo de v\u00eddeo MP4 es un formato ideal para la difusi\u00f3n de v\u00eddeo en internet usando tecnolog\u00eda HTML5. Varios son los motivos que justifican esta decisi\u00f3n:<\/p>\n<ul>\n<li><strong>Calidad visual<\/strong>. Se basa en el est\u00e1ndar MPEG-4 utilizando el c\u00f3dec H.264 AVC para v\u00eddeo y el c\u00f3dec AAC o MP3 para audio.<\/li>\n<li><strong>Adecuada relaci\u00f3n calidad\/peso<\/strong>. Al codificar un v\u00eddeo a un archivo *.MP4 se ofrece la posibilidad de configurar distintos par\u00e1metros del mismo para conseguir una aceptable relaci\u00f3n calidad\/peso.<\/li>\n<li><strong>Universalidad<\/strong>. Es un formato de v\u00eddeo de gran popularidad y expansi\u00f3n debido a que se utiliza en los reproductores personales iPod y en el software de reproducci\u00f3n QuickTime+iTunes de Apple.<\/li>\n<li><strong>Reproducci\u00f3n<\/strong>. En el ordenador se puede reproducir con VLC Media Player, QuickTime, etc.<\/li>\n<li><strong>Repositorios de v\u00eddeos<\/strong>. Los repositorios de v\u00eddeo m\u00e1s populares en Internet utilizan este formato para la difusi\u00f3n de v\u00eddeos de alta calidad HQ: Youtube, Vimeo, etc.<\/li>\n<li><strong>Extensiones<\/strong>. El archivo *.MP4 es un contenedor dentro del cual adem\u00e1s de audio y v\u00eddeo sincronizados tambi\u00e9n se pueden almacenar im\u00e1genes fijas, subt\u00edtulos, informaci\u00f3n de cap\u00edtulos, etc.<\/li>\n<li><strong>Streaming<\/strong>. Admite una descarga por streaming. Esto significa que el v\u00eddeo comienza a reproducirse en cuanto se llena el buffer inicial y contin\u00faa reproduci\u00e9ndose \u00a0mientras se completa su descarga en segundo plano.<\/li>\n<\/ul>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1515\" title=\"V\u00eddeo en HTML5\" src=\"http:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml502.jpg\" alt=\"\" width=\"400\" height=\"100\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml502.jpg 400w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2012\/12\/videohtml502-300x75.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n<p>La conversi\u00f3n de cualquier v\u00eddeo a formato MP4 se puede realizar con uno de los siguientes programas gratuitos que se pueden descargar e instalar en el ordenador:<\/p>\n<ul>\n<li><a title=\"WinFF\" href=\"http:\/\/winff.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WinFF<\/a> . Resulta sencillo de utilizar y es multiplataforma.<\/li>\n<li><a title=\"SuperC\" href=\"http:\/\/www.erightsoft.com\/SUPER.html\" target=\"_blank\" rel=\"noopener noreferrer\">Super C<\/a>. Es algo m\u00e1s complejo pero permite la configuraci\u00f3n de m\u00faltiples par\u00e1metros de calidad en el v\u00eddeo final.<\/li>\n<\/ul>\n<p>Tambi\u00e9n es posible realizar la conversi\u00f3n utilizando una aplicaci\u00f3n online donde se sube el v\u00eddeo a un servidor para luego descargarlo al equipo en un archivo *.MP4:<\/p>\n<ul>\n<li><a title=\"Online Converter to MP4\" href=\"http:\/\/video.online-convert.com\/convert-to-mp4\" target=\"_blank\" rel=\"noopener noreferrer\">Online Converter to MP4<\/a>.\u00a0No requiere registro del usuario para utilizarlo.<\/li>\n<li><a title=\"Zamzar.com\" href=\"http:\/\/www.zamzar.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zamzar<\/a>. Es un conversor \u00a0online de m\u00faltiples formatos de archivo.<\/li>\n<\/ul>\n<h1>Paso 3. Conseguir el reproductor HTML5<\/h1>\n<p>A excepci\u00f3n de la soluci\u00f3n <em><strong>video HTML5<\/strong><\/em> que no utiliza CSS ni Javascript, el resto de reproductores que se proponen se proporcionan en una carpeta independiente que contiene todos los archivos necesarios para que funcione. Para obtenerlo puedes descargar desde aqu\u00ed la versi\u00f3n indicada o bien visitar la p\u00e1gina web oficial de cada uno para comprobar si es posible obtener una versi\u00f3n m\u00e1s actual.<\/p>\n<ul>\n<li>video HTML5: <a title=\"Video de HTML5 de W3Schools\" href=\"http:\/\/www.w3schools.com\/html\/html5_video.asp\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web de W3Schools<\/a> | <a title=\"default.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/default.zip\">default.zip<\/a><\/li>\n<li>MediaElement.js: <a title=\"MediaElement.js\" href=\"http:\/\/mediaelementjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"me.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/me.zip\">me.zip<\/a><\/li>\n<li>Video.js: \u00a0<a title=\"Video.js\" href=\"http:\/\/videojs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"videojs.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/videojs.zip\">videojs.zip<\/a><\/li>\n<li>JPlayer: <a title=\"jPlayer\" href=\"http:\/\/jplayer.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"jplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jplayer.zip\">jplayer.zip<\/a><\/li>\n<li>LeanBack: <a title=\"LeanBack\" href=\"http:\/\/leanbackplayer.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> |<a title=\"leanback.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/leanback.zip\"> leanback.zip<\/a><\/li>\n<li>OSM Player: <a title=\"OSM Player\" href=\"http:\/\/mediafront.org\/osmplayer\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"osmplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/osmplayer.zip\">osmplayer.zip<\/a><\/li>\n<li>Projekktor: <a title=\"Projekktor\" href=\"http:\/\/www.projekktor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"projekktor.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/projekktor.zip\">projekktor.zip<\/a><\/li>\n<li>JW Media Player: <a title=\"JW Player\" href=\"http:\/\/www.longtailvideo.com\/jw-player\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sitio web oficial<\/a> | <a title=\"jwplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jwplayer.zip\">jwplayer.zip<\/a><\/li>\n<\/ul>\n<h1>Paso 4. Elegir el reproductor<\/h1>\n<p>Elige un modelo de los propuestos. En funci\u00f3n de tus necesidades se puede elegir uno u otro:<\/p>\n<ul>\n<li><strong>Video MP4<\/strong>. Todos los reproductores se pueden utilizar para integrar un archivo de v\u00eddeo MP4.<\/li>\n<li><strong>Listas de reproducci\u00f3n<\/strong>. Para incorporar una lista de reproducci\u00f3n de v\u00eddeos entonces elige <strong>OSM Player<\/strong> o <strong>JPlayer<\/strong>.<\/li>\n<li><strong>Subt\u00edtulos<\/strong>. Para integrar subt\u00edtulos resulta m\u00e1s f\u00e1cil con <strong>LeanBack<\/strong> y <strong>Video.js<\/strong>.<\/li>\n<li><strong>Streaming<\/strong>. <strong>JPlayer<\/strong> se puede emplear para mostrar v\u00eddeos publicados en streaming RTMP.<\/li>\n<li><strong>Multi-Resoluci\u00f3n<\/strong>. Si se desea ofrecer distintas calidades de v\u00eddeo entonces una buena opci\u00f3n es <strong>LeanBack.<\/strong><\/li>\n<li><strong>V\u00eddeos Youtube<\/strong>. Para mostrar v\u00eddeos de Youtube entonces <strong>MediaElement<\/strong> y <strong>OSMPlayer<\/strong>.<\/li>\n<\/ul>\n<p>Descarga y descomprime el zip correspondiente. Como resultado obtendr\u00e1s una carpeta que contiene todo lo necesario para que funcione.<\/p>\n<h1>Paso 5. Configurar el reproductor<\/h1>\n<p>Si vas a utilizar un archivo o archivos de v\u00eddeo propios puedes copiarlos al interior de la carpeta que has obtenido anteriormente. Otra opci\u00f3n es disponer de la URL de ese v\u00eddeo y de la imagen que utilizar\u00e1s como vista previa. Ambos activos (v\u00eddeo y p\u00f3ster) pueden estar alojadas y disponibles en un servidor de terceros o bien en la carpeta del reproductor.<br \/>\nA continuaci\u00f3n utiliza el Bloc de Notas o el editor <a title=\"NotePad ++ Portable\" href=\"http:\/\/portableapps.com\/apps\/development\/notepadpp_portable\" target=\"_blank\" rel=\"noopener noreferrer\">NotePad ++ portable<\/a> para abrir la p\u00e1gina HTML que muestra el v\u00eddeo. En el c\u00f3digo HTML resulta f\u00e1cil localizar la URL del v\u00eddeo MP4 y de la imagen JPG que se muestra a modo de p\u00f3ster. Modifica estos valores para que apunten a los activos deseados. Guarda el archivo resultante.<\/p>\n<h1>Paso 6. Subir los archivos al servidor<\/h1>\n<p>Es necesario subir a tu sitio web la carpeta con todos los archivos y subcarpetas necesarias para que el reproductor funcione. Para alojar estos archivos en la red caben distintas alternativas:<\/p>\n<ul>\n<li><strong>Sitio web personal<\/strong>. Puedes subir la carpeta del reproductor a tu espacio web personal y luego renombrarla, por ejemplo, con el identificador \u00abvideo\u00bb. Copia la direcci\u00f3n URL de la p\u00e1gina principal: index.html. Ejemplo: <em>http:\/\/canaltic.com\/video\/index.html<\/em><\/li>\n<li><strong>Google Sites<\/strong>. Si dispones de cuenta en Google, puedes acceder a Google Sites y crear un sitio y dentro del mismo crear una carpeta con el nombre \u00abvideo\u00bb. Sube todos los archivos a la misma. Luego haz clic en el enlace \u00abVer\u00bb del archivo index.html situado en la carpeta principal. Copia y pega en \u00a0la direcci\u00f3n que se muestra en la barra de direcciones del navegador. Ejemplo: <em>https:\/\/&lt;codigo_alfanumerico&gt;\/site\/&lt;nombre_sitio&gt;\/video\/index.html<\/em><\/li>\n<li><strong>DropBox<\/strong>. Si dispones de cuenta en DropBox, crea una carpeta con el nombre \u00abvideo\u00bb en \u00abPublic\u00bb y dentro de esa carpeta sube los archivos. Desde el explorador de archivos del sistema windows haz clic derecho sobre la p\u00e1gina index.html para elegir \u00abDropBox &gt; Copiar enlace p\u00fablico\u00bb. Si utilizas el interfaz web de Dropbox, haz clic sobre el archivo y elige \u00abCopiar enlace p\u00fablico\u00bb. Ejemplo: <em>http:\/\/dl.dropbox.com\/u\/&lt;numeros&gt;\/video\/index.html<\/em><\/li>\n<\/ul>\n<h1>\u00a0Paso 7. Crear\/pegar el c\u00f3digo iframe<\/h1>\n<p>A continuaci\u00f3n construye el c\u00f3digo iframe en cuyo interior se mostrar\u00e1 la p\u00e1gina index.html con el reproductor elegido:<\/p>\n<p><code>&lt;iframe src=\"&lt;url_index_reproductor&gt;\" frameborder=\"0\" width=\"100%\" height=\"360px\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>El valor de los par\u00e1metros width y height se pueden ajustar en funci\u00f3n del tipo de reproductor elegido. Para finalizar copia y pega este c\u00f3digo en la pesta\u00f1a HTML del art\u00edculo de tu blog, wiki, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"V\u00eddeo en HTML5\" src=\"http:\/\/canaltic.com\/blog\/wp-content\/uploads\/2011\/12\/jwplayer6.jpg\" alt=\"\" width=\"400\" height=\"100\" \/><\/p>\n<h1>Ejemplo<\/h1>\n<h6><iframe loading=\"lazy\" src=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/videojs\/documental.html\" width=\"100%\" height=\"360px\" frameborder=\"0\"><\/iframe><\/h6>\n<address style=\"float: right;\"><a title=\"Generaci\u00f3n perdida\" href=\"http:\/\/www.rtve.es\/alacarta\/videos\/documentos-tv\/documentos-tv-generacion-perdida\/1219065\/\" target=\"_blank\" rel=\"noopener noreferrer\">Documentos TV &#8211; \u00bfGeneraci\u00f3n perdida?<\/a>\u00a0&#8211; usando el reproductor\u00a0<a title=\"Video.js\" href=\"http:\/\/videojs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Video.js<\/a><\/address>\n<div><\/div>\n<h1>Descarga<\/h1>\n<ul>\n<li>video HTML5:\u00a0\u00a0<a title=\"default.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/default.zip\">default.zip<\/a><\/li>\n<li>MediaElement.js:\u00a0\u00a0<a title=\"me.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/me.zip\">me.zip<\/a><\/li>\n<li>Video.js: \u00a0<a title=\"videojs.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/videojs.zip\">videojs.zip<\/a><\/li>\n<li>JPlayer:\u00a0\u00a0<a title=\"jplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jplayer.zip\">jplayer.zip<\/a><\/li>\n<li>LeanBack:\u00a0<a title=\"leanback.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/leanback.zip\">leanback.zip<\/a><\/li>\n<li>OSM Player:\u00a0\u00a0<a title=\"osmplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/osmplayer.zip\">osmplayer.zip<\/a><\/li>\n<li>Projekktor:\u00a0<a title=\"projekktor.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/projekktor.zip\">projekktor.zip<\/a><\/li>\n<li>JW Media Player:\u00a0<a title=\"jwplayer.zip\" href=\"http:\/\/canaltic.com\/blog\/html\/videohtml5\/jwplayer.zip\">jwplayer.zip<\/a><\/li>\n<\/ul>\n<h1>M\u00e1s informaci\u00f3n<\/h1>\n<ul>\n<li><a title=\"Video de HTML5 de W3Schools\" href=\"http:\/\/www.w3schools.com\/html\/html5_video.asp\" target=\"_blank\" rel=\"noopener noreferrer\">W3Schools<\/a><\/li>\n<li><a title=\"MediaElement.js\" href=\"http:\/\/mediaelementjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">MediaElement.js<\/a><\/li>\n<li><a title=\"Video.js\" href=\"http:\/\/videojs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Video.js<\/a><\/li>\n<li><a title=\"jPlayer\" href=\"http:\/\/jplayer.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPlayer<\/a><\/li>\n<li><a title=\"LeanBack\" href=\"http:\/\/leanbackplayer.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">LeanBack<\/a><\/li>\n<li><a title=\"OSM Player\" href=\"http:\/\/mediafront.org\/osmplayer\" target=\"_blank\" rel=\"noopener noreferrer\">OSM Player<\/a><\/li>\n<li><a title=\"Projekktor\" href=\"http:\/\/www.projekktor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Projekktor<\/a><\/li>\n<li><a title=\"JW Player\" href=\"http:\/\/www.longtailvideo.com\/jw-player\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\">JW Media Player<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Es posible incorporar un v\u00eddeo al art\u00edculo de un espacio educativo (blog, wiki, moodle) usando HTML5. \u00a0En Internet se dispone de distintos reproductores de v\u00eddeos dise\u00f1ados en esta tecnolog\u00eda y que representan una excelente alternativa a Flash. De esta forma resultar\u00e1n accesibles desde cualquier tipo de dispositivo: tel\u00e9fono m\u00f3vil, tableta, notebook, pc, etc. En esta [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[91],"tags":[43,53,37,33],"class_list":["post-1458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimedia","tag-html5","tag-mp4","tag-multimedia","tag-video-2"],"_links":{"self":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1458"}],"version-history":[{"count":62,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":2839,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458\/revisions\/2839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/1513"}],"wp:attachment":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}