Manual del visor de llistes de reproducció del BIG v de setembre de 2013

Transcripción

1 Manual del visor de llistes de reproducció del BIG v de setembre de 2013

2 Índex de contingut Introducció... 3 Presentació del visor... 3 Com es pot inserir el visor en un web

3 Introducció El present document vol mostrar el funcionament de les diferents opcions disponibles i l ús del visor de llistes de reproducció de gencat.cat. Presentació del visor El visor de llistes de reproducció té dos modes de visualització: horitzontal i vertical. La diferència és la posició que ocupa la llista de media. La imatge de sota mostra el visor en vista vertical; es pot apreciar que els media són a la part dreta, en una llista vertical. 1. Botó de reproducció. Quan el vídeo s està visualitzant, el botó canvia la seva funcionalitat per poder aturar la reproducció. Si el media visualitzat és una imatge, aquest botó no estarà disponible. 2. Barra de progrés. Podem situar el requadre en qualsevol punt de la barra per veure un punt específic del vídeo. Si el media visualitzat és una imatge, aquesta barra no estarà disponible. 3. Informació del temps actual de reproducció i el temps total del vídeo. Si el media visualitzat és una imatge, aquest botó no estarà disponible. 4. Ajustament del volum de l àudio. Si se situa el cursor damunt la icona, apareix la barra que permet seleccionar el volum. Si es fa clic a la icona, el vídeo queda en silenci. Si el vídeo està en silenci i es torna a fer clic a la icona, s activa un altre cop el so. Si el media visualitzat és una imatge, aquest botó no estarà disponible. 3

4 5. Reproduir el media en pantalla completa. El visor passarà a ocupar tota l amplada i l alçada de la pantalla. Si es fa clic al botó un altre cop o si es prem la tecla Esc, el vídeo torna a la mida original. 6. Botó per paginar la llista als continguts previs. Si estem a la primera pàgina, aquest botó estarà desactivat. 7. Llista de media disponibles. Quan es fa clic sobre un media, aquest passa a la part del visor, i si és un vídeo es començarà a reproduir. Si se situa el cursor sobre un media, al visor se n mostrarà el títol i la descripció: 8. Botó per paginar la llista als continguts següents. Si estem a l última pàgina, aquest botó estarà desactivat. La imatge següent mostra el visor en format horitzontal. Els media són a sota del visor i es mostren en una llista horitzontal: 4

5 Com es pot inserir el visor en un web Una llista de reproducció es genera a partir d una galeria del BIG configurada com a llista de reproducció (playlist).! Tingueu en compte que si la galeria relacionada, té més de 20 elements configurats, la llista de reproducció, només mostrarà els 20 primers elements publicats. Un cop tinguem la galeria configurada i desada, anirem a la pàgina de selecció de plugins de Gencat ( 1. Selecció de la llista de reproducció que es vol mostrar. Cal introduir l identificador de la galeria que es vol mostrar al visor de llistes de reproducció. Aquest identificador es pot trobar a la gestió de galeries. Cal seleccionar la galeria, i a sota de la llista de galeries es mostrarà la informació relacionada. Vegeu la imatge següent: 5

6 2. Selecció de l alçada del visor. 3. Selecció de l amplada del visor. 4. Selecció del format. Com hem vist més amunt, hi ha dos formats disponibles: vertical i horitzontal. Aquesta opció ens permet seleccionar el format que s adapti millor a les nostres necessitats. 5. Selecció de l idioma en què apareixeran els títols i les descripcions dels media de la llista. L idioma per defecte és el català. 6. Un cop introduïts els valors als diferents camps, farem clic sobre el botó Personalitza per actualitzar la llista de reproducció. 7. Botó per visualitzar el codi font. 1. Introduir la llibreria del framework javascript de Gencat.cat 6

7 2. Incloure el plugin de la llista de reproducció (bigplaylist). 3. Afegir una capa (div) on serà pintada la llista de reproducció. A l exemple s ha donat el nom bigplaylist, però es pot fer servir qualsevol altre nom. Introduir la crida al plugin llista de reproducció, passant com paràmetres la configuració seleccionada i la capa on pintar la llista (a l exemple bigplaylist ). 7