Qbrick s krav til video filtyper

Transkript

1 Indhold Qbrick s krav til video filtyper... 1 Krav til ordningen/området... 1 Qbrick s krav til video leverandør... 1 Video og billede størrelser i WCM:... 1 Upload en video... 2 Trin 1: Mediefiler... 2 Trin 2: Metadata... 4 Trin 3: Thumbnail... 5 Trin 4: Kategorier... 7 Trin 5: Embed... 8 WCM: Embed video på Privat og erhverv... 9 Indsætning af video på en ordningsforside WCM: Embed video på Om ATP Indsætning af video under mediesektionen Åben video i en lightbox under Om ATP Metode 1: Åben videoen i en lightbox ved at oprette en video-skabelon Metode 2: Åben videoen i en lightbox ved at bruge Direct link Sådan opdateres redigerings-skabelonen... 26

2 Qbrick s krav til video filtyper Qbrick s system (transcoder) er sat op til at tage filer ind med følgende fil-endelser:.mpeg 1,.MPEG 2,.MPEG 4.WMV.DV.3GP.ASF.MOV,.MP4.AVI Krav til ordningen/området Når vi skal uploade en video i Qbrick, så har vi brug for data fra ordningen/området. Det er vigtigt, at vi får disse data dels fordi de vil være synlige for brugeren dels fordi de skal angives, når videoen uploades. Vi har brug for: 1. En overskrift(titel) til videoen - den kommer brugeren til at se, når musen holdes hen over videoen. 2. Beskrivelse (descrip tion) - en kort beskrivelse af, hvad videoen handler om, som kommer til at stå under videoen. 3. Tags bruges til google søgning, her skriver man alle de tænkelige ord, en bruger kan finde på at søge på. Tag words er ikke synlige i playeren. NB! Husk at gemme videoen, du får fra leverandøren i S:\KPMA\FILM Det er ikke alle, der har adgang til mappen. Du kan bestilles adgang via Service Desk. Qbrick s krav til video leverandør Der må ikke være følgende karakterer i filnavnet: ø, æ, å, ä, ö, mellemrum, / \ : *? < >& + F4V-filer må ikke uploades. Den rå video skal altid være i 16:9 format. Lyden skal være i 2 kanaler (stereo) Video og billede størrelser i WCM: Område Video og billede str. Om ATP- forside Flash-billeder: 1280x 550 Store artikelbilleder: 290x114 Små artikelbilleder: 89x89 Om ATP- Generelt Spot billede: 160x114 Wide video: 704x396 - Wide billede: 705x250 Ekstra Wide artikelside video/ billeder : 454x255 Normal video: 480x272 Normalt billede: 480x250 Lightbox video: 768x432 Privat & Erhverv Forside billede: 961x628 Video-player: 454x283 Live-player: 454x255 Billede/banner: 454x180 Teaser: 185 x (ikke fastsat) Thumbnail billede til video skal altid være på samme str. som videoen. Fx hvis videoen er på 480x272, så skal thumbnail billedet også være 480x272. Thumbnail billede til video skal altid være på samme str. som videoen. Fx hvis videoen er på 454x283, så skal thumbnail billedet også være 454x283. 1

3 Upload en video 1. Log ind med dit brugernavn og adgangskode på Adgangskoden kan bestilles via. Qbrick. 2. Resultat: Du vil nu være logget ind og du kan uploade en ny video eller administrere portalens eksisterende videoer. 3. Klik på Video management i top menuen. 4. Herefter skal man følge de 5 nedenstående trin(trin 1: Mediefiler, Trin 2: Metadata, Trin 3: Thumbnail, Trin 4: Kategorier, Trin 5: Embed) for at uploade en video i Qbrick. Trin 1: Mediefiler 1. Klik på [+ Tilføj mediefil] 2. Klik på Upload fil 2

4 Resultat: Der åbnes Upload fil vindue, hvor du skal vælge den råvideo du vil uploade. 3. Klik på "Vælg profil" s dropdown felt og vælg HD 16:9 + mobile. 4. Nu skal du klikke på [Select file..]. Der åbnes et nyt vindue, hvor du har mulighed for at vælge den video, der skal uploades. Videoen skal være gemt i mappen S:\KPMA\VIDEO 5. Klik på knappen [Næste] Resultat: Videoen er nu uploaded. Det tager ca. 5 gange længden af videoen, før den er klar til at blive afspillet. Fx en video på 2 minutter tager ca. 2x5=10 minutter til den er klar. En sendes 3

5 fra Qbrick til den oplyste mail adresse, når videoen er uploaded. Trin 2: Metadata Når vi skal uploade en video til Qbrick, har vi brug for data fra ordningen/området. Det er vigtigt, at vi får disse data dels fordi de vil være synlige for brugeren dels fordi de skal angives, når videoen uploades. Vi har brug for: 1. En overskrift(titel) til videoen - den kommer brugeren til at se, når musen holdes hen over videoen. 2. Beskrivelse (description) - en kort beskrivelse af, hvad videoen handler om, som kommer til at stå under videoen. 3. Tags her skriver man alle de tænkelige ord, en bruger kan finde på at søge på. Tag words er ikke synlige i playeren. 4

6 Trin 3: Thumbnail En Thumbnail oprettes automatisk, når du uploader videoen. Hvis du ikke vil ændre Thumbnail en skal du klikke på knappen [Næste] for at komme videre til næste trin. Hvis du vil ændre det, skal du følge enten trin b eller c: 5

7 a. Under Aktuel kan du se den automatisk valgte thumbnail b. Under Generer kan du generer et thumbnail billede fra videoen 1. Klik på [Play] knappen, og afspille videoen 2. Klik på den røde cirkel knap [Click to generate] for at tage et snap-shot(billede). 3. Klik på [Gem] c. Under Upload kan du uploade et billede fra din computer. 6

8 1. Klik på [Browse] og find billedet i din computer 2. Klik på [Gem] hvis du vil gemme billedet, eller [fjern], hvis du fortryder valget af billedet. Trin 4: Kategorier 1. Sæt et hak ved den kategori videoen hører til. 2. Klik på [Gem] 7

9 Trin 5: Embed 1. Bestem størrelsen til videoen. Se video matrixen på første side i dette dokument. 2. Klik på knappen [Preview] for at se videoen i den bestemte størrelse. 3. Du skal bruge iframe koden til at vise videoen på atp.dk De næste trin vejleder dig i, hvordan du oploader videoen under privat, erhverv og omatp. 8

10 WCM: Embed video på Privat og erhverv For at embede fil m på Privat og Erhverv, skal der først oprettes en html komponent og derefter skal der linkes til denne fra en indholdsside. 1. Bestem video størrelsen. Se video matrixen på første side i dette dokument. 2. Kopier nu iframe koden: a. Marker iframe koden(ctrl +a) b. Kopier koden (ctrl + c) 3. I WCM skal der oprettes en HTML komponent. a. Klik på knappen [Ny] b. Vælg Komponent og derefter HTML Resultat: Der åbnes nu en tom HTML komponent side, som skal udfyldes. Sørg for at give filen et navn som giver mening for andre brugere i WCM. Fx Film_Omatp_profil_introduktion til atp koncernen 9

11 4. Den kopierede iframe kode indsættes i komponenten. 5. Find den pågældende indholdsside videon skal vises i og gå ind i koden. 6. Indsæt denne komponent tag-kode: <p><component name=" atp /navnet på html komponenten" /> </Component></p> 7. Kopier navnet på HTML komponenten og indsætte det i komponent tag- koden på indholdssiden. 8. Resultat: HTML komponent navnet er nu sat ind på siden: 10

12 9. Gem siden 10. Vælg Vis resultat 11. Gem og godkend siden 12. Resultat: Videoen er nu lagt på! Indsætning af video på en ordningsforside Når du åbner en ordningsforside, kan du vælge imellem 3 faneblade: 1. Klik på fanebladet Indhold 2. Længere ned på siden kan du se(nedenstående billede): 1. Klik på Vælg komponent 2. Resultat: Der åbnes dialogboksen Vælg komponent 3. Gå til Komponenter/HTML og find den HTML komponent, du skal bruge. 4. Klik på [OK]. 11

13 WCM: Embed video på Om ATP 1. Bestem video størrelsen. Se video matrixen på første side i dette dokument. 2. Kopier nu iframe koden a. Marker iframe koden b. Højreklik c. Kopier 3. I WCM skal der oprettes en HTML komponent. a. Klik på knappen [Ny] b. Vælg Komponent og derefter HTML Resultat: Der åbnes nu en tom HTML komponent side, som skal udfyldes. Sørg for at give filen et navn som giver mening for andre brugere i WCM. 12

14 4. Den kopierede iframe kode indsættes i komponenten. 5. Find den pågældende indholdsside og gå ind i koden. 6. Indsæt denne komponent tag-kode: <p><component name=" atp /navnet på html komponenten" /> </Component></p> 7. Kopier navnet på HTML komponenten og indsætte det i komponent tag- koden på indholdssiden. Resultat: Komponent navnet er nu sat ind i tag-koden: 13

15 8. Gem siden 9. Vælg Vis resultat 10. Gem og godkend siden 11. Resultat: Videoen er nu lagt på! Indsætning af video under mediesektionen Når du åbner en ordningsforside, kan du vælge imellem 3 faneblade: 3. Klik på fanebladet Indhold 4. Længere ned på siden kan du se nedenstående billede: 5. Klik på Vælg komponent 6. Resultat: Der åbnes dialogboksen Vælg komponent 7. Gå til Komponenter/HTML og find den HTML komponent, du skal bruge. 8. Klik på [OK]. Resultat: Nu er komponenten sat under mediesektionen på siden. 14

16 Åben video i en lightbox under Om ATP Video lightbox bruges kun, når vi vil vise en stor video ved at klikke på et spot-billede eller tekst link. Der findes 2 metoder til at gøre dette på: Metode 1: Ved at oprette en video-skabelon Metode 2: Ved at bruge Direct link Metode 2 er nemmest at bruge, men kan ikke bruges på et spot-billede. Metode 1: Åben videoen i en lightbox ved at oprette en video-skabelon Trin 1: kopier embed koden fra Qbrick 1. Her skal du huske at ændre video størrelsen til 768x432 px. Se video matrixen på første side i dette dokument. 2. Kopier nu iframe koden a. Marker iframe koden (ctrl +a) b. Kopier koden (ctrl +c) Resultat: Nu har du kopieret koden, som du senere skal sætte ind i en video-indholdsside. 15

17 Trin 2: Opret en ny video-indholdsside 1. Klik på knappen [Ny] 2. Vælg Indhold 3. Du skal nu vælge video-skabelonen x90 Video (Om ATP) og klik på [OK] Resultat: Der åbnes nu en tom video-indholdsside, som skal udfyldes. Sørg for at give filen et navn som giver mening for andre brugere i WCM. 16

18 4. Længere ned på video-indholdssiden, kan du finde indhold feltet. Her skal den kopierede iframe kode indsættes. Resultat: Nu er video-indholdssiden klare til godkendelse. Følg derfor nedenstående trin. Trin 3: Gem og godkend video-indholdet 1. Klik på Gem og godkend 2. Video-indholdsside skal gemmes under samme strukturområde som det indholdsside(web side), videoen lightboxen skal vises/åbnes i. 17

19 Fx Videoen som vi vil åbne i lightbox handler om atp og skal vises på siden Kort om atp, derfor gemmer vi video-indholdssiden også under dette webstedsområde. 3. Vælge placeringen sidste underordnede 4. Klik på [OK] Resultat: Nu er video-indholdssiden halvvejs gennem godkendelsen, den næste knap du skal huske at klikke på er [Næste trin]. 18

20 5. Klik på [Næste trin]. Resultat: Du har nu gemt din video-indholdsside. Herfra kan du vælge om du vil åbne lightboxen ved at klikke på et spot-billede(trin 4) eller tekst link(trin 5). 19

21 Trin 4: Åbn video-lightbox ved klik på en spot Lightbox funktionen er integreret i omatp redigeringsskabeloner, derfor skal hver spot indeholde nedenstående felt: Hvis spottet du vil åbne lightboxen i ikke har feltet ovenover, skal du opdatere redigeringsskabelonen for den pågældende indholdsside. Se afsnit: Sådan opdateres redigerings-skabelonen Det næste du nu skal gøre, er at finde et spot-billede og sætte et play ikonen på spot-billedet. Play-ikonen sættes på billedet så brugeren ved, at der vises en video ved klik på spot-billedet. Sæt play-ikonen på spot-billedet og link til video-indholdssiden Kig i video-matrixen på første side og finde ud af hvilken størrelse billede spottet kan have. 1. Find størrelsen for spot/teaserboks billedet. 2. Sæt play ikonen på billedet vha. Photoshop, play knappen kan du finde her: S:\KPMA\Webgruppen\Vejledninger\WCM\Vejledninger til Digitalisering 3. Gem billedet med play-ikonen i WCM en. 4. Sæt billedet ind i spottet: 20

22 a) Klik på [Vælg komponent] b) Find dit billede med play-ikonen under komponenter/billeder c) Markér billede komponenten d) Tryk [OK]. Resultat: Du kan nu dit billede komponent er sat ind på siden. 5. Link til video-indholdsside: a) Tryk på [Gennemse indhold]. b) Klik dig ned gennem strukturen, til du kommer til den gemte video-skabelon. c) Markér video-skabelonen. d) Tryk [OK]. Resultat: Nu linker spot-billedet til video-indholdsside, dvs. videon åbnes i en lightbox, når der klikkes på spot-billedet. 6. Klik på knappen [Gem] og derefter på [Vis resultat] for at resultatet. Sådan kunne spot-billedet se ud. Ved på spot-billedet åbnes videoen i en lightbox: 21

23 Trin 5: Åbn video-lightbox ved klik på et tekstlink 1. Du laver et link ved at placere markøren det sted i tekst editoren, du vil lave dit link. 2. Marker teksten 3. Kopier teksten 4. Herefter klikker du på knappen Opret link til LWCM-indhold (markeret med rødt ovenfor). Resultat: Der åbnes dialogboksen Indsæt et link 5. Indsæt den kopierede tekst i felterne Linktekst: og Linkbeskrivelse 6. Tryk på knappen [Gennemse indhold] for at vælge den video-indholdsside, som der skal linkes til. Resultat: Dialogboksen Vælg et element, der skal linkes til åbnes 7. Vælg nu den video-indholdsside, som du har gemt og ønsker at linke til ved at markere denne. 8. Klik på [OK] Resultat: Du kommer tilbage til det første vindue, hvor du kan se, hvilken komponent du har valgt at linke til øverst til højre. 9. Klik på [OK] Resultat: Nu er teksten klikbar, men videoen åbnes endnu ikke i en lightbox. 22

24 10. Åbn kode vinduet for RTE indhold og tilføj dette kode: class= lightbox2 i linket. Resultat: Nu åbnes videoen i lightbox, når man klikker på linket. 23

25 Metode 2: Åben videoen i en lightbox ved at bruge Direct link Denne metode kan kun bruges til at åbne videoen i en lightbox ved klik på et tekstlink. Trin 1: Kopier embed koden fra Qbrick 1. Her skal du huske at ændre video størrelsen til 768x432 px. Se video matrixen på første side i dette dokument. 2. Kopier nu Direct link a. Marker iframe koden (ctrl +a) b. Kopier koden (ctrl +c) Resultat: Nu har du kopieret linket, som du senere skal sætte ind i en indholdsside. 24

26 Trin 2: Opret et tekstlink 1. Åben en tekst-editor 2. Placer markøren det sted i tekst editoren, du vil lave dit link. 3. Skift til Kode vinduet og sæt nedenstående kode ind: <p><a target="" title="" href="sæt Direct link kopieret fra Qbrick her" class="lightbox2">tekstlink</a></p> Eksempel: <p><a target="" title="" href=" 38;as=0&fs=1&rp=0&cb=1&il=0&sp=0&db=0&ct=1&mni=0"class="lightbo x2">se pressemødet 2012</a></p> Resultat: Nu kan man åbne videoen i en lightbox: 25

27 Sådan opdateres redigerings-skabelonen 1. Se efter, hvilken redigeringsskabelon er blevet brugt: a. Klik på knappen [Vis skjulte felter] b. Skift til fanen Indholdindstillinger c. Fold ud Egenskaber for indhold Resultat: Nu kan du se, hvilken redigeringsskabelon er blevet brugt. Fx på indholdssiden vist ovenover har vi brugt redigeringsskabelonen x3 Artikel Normal (OM ATP). 2. Herefter klikker du på knappen [Anvend redigeringsskabelon] og vælger den samme redigeringsskabelon, der er blevet brugt. 3. Se eksemplet nedenunder, sæt et hak kun ved de steder, som er vist: 26

28 4. Klik på [OK] 5. Klik på knappen [Gem] Resultat: Nu har du opdateret redigeringsskabelonen og felterne til lightboxen kan nu ses under hver spot. 27