- Contexto
Con el objetivo de mostrar información dinámica de noticias y tener que posicionarla en la lista de reproducción, proporcionamos esta documentación para demostrar de manera práctica cómo construir esta plantilla.
- Objetivo
Cree una plantilla receptiva que se ajuste a las dimensiones del reproductor y que le permita cargar información de texto e imagen desde una carpeta local, disponible en la carpeta del proyecto del reproductor.
- Requisitos
Editor de texto instalado. Recomendamos el texto sublime.
Conocimiento en JavaScript / HTML5 y CSS.
- Construir la plantilla
Inicie sesión en la cuenta de 4YouSee Designer e importe los archivos de imagen y video necesarios para crear la plantilla, crear los campos de texto, colocar las imágenes, etc. Aplicar animaciones a elementos, color de fuente, tipo de fuente, etc.
Cree las variables para los campos de texto e imagen. Recuerde que las variables deben definirse para todos los campos de texto que se rellenarán dinámicamente. Para obtener más información, vea cómo crear plantillas RSS con 4YouSee Designer:
Ejemplo:
Establecer el campo para la imagen.
Definidos los campo para los textos.
Después de crear la plantilla debemos exportar el archivo.
El siguiente diagrama muestra la estructura de los archivos de plantilla del archivo .zip.
- Personalizando la plantilla
Para personalizar la plantilla, debe usar los siguientes archivos.
index.html
player_html.js
fetchData.js
Los archivos index.html y player_html.js son generados automáticamente por el diseñador y estarán dentro de project_folder / js. El archivo fetchData.js más los otros archivos y carpetas necesarios para la personalización de la plantilla se adjuntarán al final de este documento.
Al final del archivo index.html, se deben agregar las siguientes líneas de código:
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/fetchData.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/x2js/xml2json.min.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/textFit-master/textFit.min.js"></script>
<script type="text/javascript" src="59f88c15f948e7c14a000c38/js/jquery/dist/jquery.min.js"></script>
La línea para el archivo fetchData debe insertarse antes de la línea para el archivo player_html.
El archivo player_html.js es responsable de manejar los objetos que componen la plantilla, como el formato de fecha, formato de hora, pronóstico del tiempo, variables, bucles, animaciones, controles de video, etc.
El archivo fetchData.js es responsable de leer y manejar la información XML local. En este archivo, los tratamientos deben realizarse para leer las variables, las imágenes, el tratamiento de cómo se guardarán y recuperarán las variables del almacenamiento local, etc.
Ejemplo de archivo: fetchData.js
Cuando se ejecuta mediante el archivo player_htm.html, la función fetchData devolverá un objeto con la información que se mostrará en la plantilla, o devolverá un error. Esta devolución se realiza mediante la función de callback, que se encarga de devolver los datos apropiados a la plantilla. De manera predeterminada, el primer tipo de datos que devuelve una función de callback es el parámetro de error, que le indica qué error ocurrió. Si no se ha producido ningún error, el primer parámetro a proporcionar debe tener el valor null, y el segundo parámetro debe ser el objeto con toda la información que se mostrará en la plantilla.