Home > Preguntas Más Frecuentes > Contenido multimedia embebido en html
Embeber contenidos Flash, Videos, Imágenes en HTML
Este tema desarrolla una práctica recomendada para embeber distintos tipos de contenidos en HTML.
Esto nos permite crear páginas web sencillas para mostrar estos contenidos, y permitir mostrarlos bien en modo de pantalla completa, o bien en un tamaño de ancho y alto especificado.
Aplicaciones
Este método nos permite incluir contenidos HTML en una página web sencilla, que puede utilizarse:
- como un archivo local (ej. en el directorio ..\SiteKiosk\HTML) para ser utilizada tanto en modo interactivo como en modo salvapantallas
- en el SiteKiosk Player de SiteKiosk clásico (Windows ó Android)
- como parte de un contenido de skin StartPage de escritorio (ej. Portal StartPage, StartScreen, Desktop Skin, etc.)
- para ser alojada en cualquier sitio web externo
- como elemento de contenido de cartelería digital (digital signage clásico, SiteCaster CMS, o SiteKiosk Online)
A continuación mostramos distintos ejemplos con distintos tipos de contenido.
Ejemplo presentación Flash
El siguiente ejemplo muestra un archivo en formato Flash (extensión .swf) para ser mostrado en pantalla completa.
<html>
<head>
<title>Archivo Flash</title>
</head>
<body scroll=no style="margin:0px;">
<object width="100%" height="100%">
<param name="movie" value="main.swf">
<embed src="presentacion.swf" width="100%" height="100%">
</embed>
</object>
</body>
</html>
Podemos variar el tamaño de la ventana modificando los parámetros "width" y "height" y expresando el valor en píxeles. Por ejemplo, para mostrar la presentación en una resolución de 800 x 600 px modificaríamos estos valores:
width="800px" height="600px"
Ejemplo Videos
El siguiente ejemplo muestra cómo incrustar un video y reproducirlo automáticamente en pantalla completa.
<html>
<head>
<title>Video</title>
</head>
<body style="margin:0px;">
<video width="100%" height="100%" controls autoplay>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>
Podemos variar el tamaño de la ventana modificando los parámetros "width" y "height" y expresando el valor en píxeles o en %.
Ejemplo Imágenes
El siguiente ejemplo muestra como incrustar una imagen para reproducir en pantalla completa.
<html>
<body style="margin:0px;">
<img src="mi-imagen.jpg" width="100%" height="100%" border="0">
</body>
</html>
Podemos variar el tamaño de la ventana modificando los parámetros "width" y "height" y expresando el valor en píxeles o en %.
Tratamiento de archivos adjuntos
La ruta de cualquiera de los archivos a incrustar puede detallarse de forma absoluta (especificando la ruta completa), o de forma relativa (desde la ubicación de la propia página HTML), y si no se especifica se entenderá que es la misma donde ubicamos la página HTML.
Cuando añadimos contenido de páginas web locales en SiteKiosk es conveniente utilizar la ruta ..\SiteKiosk\Html\ ya que cuenta con los permisos necesarios para poder ejecutarse. Si se desea utilizar otra distinta sería necesario añadirlas en los ajustes de área de navegación permitida y en el Gestor de Seguridad.
Para añadir páginas HTML como elementos de cartelería o como un elemento skin de tipo StartPage, debemos incluir los archivos a los que apunta la página web (ej. la presentación Flash, vídeo o imagen). En el caso de la cartelería digital (digital signage clásico o SiteCaster CMS), es necesario adjuntarlos al crear el contenido de tipo "HTML".
Otros ajustes en la página HTML
Aunque los ejemplos anteriores se han simplificado al máximo, un webmaster o programador puede completar el código según sea necesario para completar las páginas con otras declaraciones, parámetros adicionales, otras etiquetas o métodos alternativos. Las siguientes páginas de ayuda muestran información con ejemplos.
Declaración del tipo de documento (HTML5, HTML 4.01 y diferencias)
Etiqueta embed
Etiquetas audio/video para HTML5
Para incrustar un contenido en una página local HTML para ser reproducida en SiteKiosk o en cartelería digital, el código de los ejemplos anteriores es suficiente.
Pero también es posible completar la programación para añadir funciones o controles adicionales.
Vea también ...
Volver arriba