29.07.2013 Views

Video manual QBRICK.pdf - Borger.dk

Video manual QBRICK.pdf - Borger.dk

Video manual QBRICK.pdf - Borger.dk

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Indhold<br />

Qbrick’s krav til video filtyper ............................................................................................................................ 1<br />

Krav til ordningen/området .................................................................................................................. 1<br />

Qbrick’s krav til video leverandør ......................................................................................................... 1<br />

<strong>Video</strong> og billede størrelser i WCM: ....................................................................................................... 1<br />

Upload en video ................................................................................................................................................. 2<br />

Trin 1: Mediefiler .................................................................................................................................. 2<br />

Trin 2: Metadata ................................................................................................................................... 4<br />

Trin 3: Thumbnail ................................................................................................................................. 5<br />

Trin 4: Kategorier .................................................................................................................................. 7<br />

Trin 5: Embed ....................................................................................................................................... 8<br />

WCM: Embed video på Privat og erhverv ......................................................................................................... 9<br />

Indsætning af video på en ordningsforside ........................................................................................ 11<br />

WCM: Embed video på Om ATP ...................................................................................................................... 12<br />

Indsætning af video under mediesektionen ...................................................................................... 14<br />

Åben video i en lightbox under Om ATP ............................................................................................ 15<br />

Metode 1: Åben videoen i en lightbox ved at oprette en video-skabelon .............................................. 15<br />

Metode 2: Åben videoen i en lightbox ved at bruge ”Direct link” .......................................................... 24<br />

Sådan opdateres redigerings-skabelonen ....................................................................................................... 26


Qbrick’s krav til video filtyper<br />

Qbrick’s system (transcoder) er sat op til at tage filer ind med følgende fil-endelser:<br />

.MPEG 1 , .MPEG 2 , .MPEG 4<br />

.WMV<br />

.DV<br />

.3GP<br />

.ASF<br />

.MOV , .MP4<br />

.AVI<br />

Krav til ordningen/området<br />

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<br />

disse data dels fordi de vil være synlige for brugeren dels fordi de skal angives, når videoen uploades. Vi har<br />

brug for:<br />

1. En overskrift(titel) til videoen - den kommer brugeren til at se, når musen holdes hen over videoen.<br />

2. Beskrivelse (descrip tion) - en kort beskrivelse af, hvad videoen handler om, som kommer til at stå<br />

under videoen.<br />

3. Tags – bruges til google søgning, her skriver man alle de tænkelige ord, en bruger kan finde på at<br />

søge på. Tag words er ikke synlige i playeren.<br />

NB!<br />

Husk at gemme videoen, du får fra leverandøren i S:\KPMA\FILM Det er ikke alle, der har adgang til<br />

mappen. Du kan bestilles adgang via Service Desk.<br />

Qbrick’s krav til video leverandør<br />

Der må ikke være følgende karakterer i filnavnet: ø, æ, å, ä, ö, mellemrum, / \ : * ? ” < >& | +<br />

F4V-filer må ikke uploades.<br />

Den rå video skal altid være i 16:9 format.<br />

Lyden skal være i 2 kanaler (stereo)<br />

<strong>Video</strong> og billede størrelser i WCM:<br />

Område <strong>Video</strong> og billede str.<br />

Om ATP- forside Flash-billeder: 1280x 550<br />

Store artikelbilleder: 290x114<br />

Små artikelbilleder: 89x89<br />

Om ATP- Generelt Spot billede: 160x114<br />

Wide video: 704x396 - Wide billede: 705x250<br />

Ekstra Wide artikelside video/ billeder : 454x255<br />

Normal video: 480x272<br />

Normalt billede: 480x250<br />

Lightbox video: 768x432<br />

Privat & Erhverv Forside billede: 961x628<br />

<strong>Video</strong>-player: 454x283<br />

Live-player: 454x255<br />

Billede/banner: 454x180<br />

Teaser: 185 x (ikke fastsat)<br />

Thumbnail billede til video skal altid være<br />

på samme str. som videoen.<br />

Fx hvis videoen er på 480x272, så skal<br />

thumbnail billedet også være 480x272.<br />

Thumbnail billede til video skal altid være<br />

på samme str. som videoen.<br />

Fx hvis videoen er på 454x283, så skal<br />

thumbnail billedet også være 454x283.<br />

1


Upload en video<br />

1. Log ind med dit brugernavn og adgangskode på http://ovp.qbrick.com. Adgangskoden kan<br />

bestilles via. Qbrick.<br />

2. Resultat: Du vil nu være logget ind og du kan uploade en ny video eller administrere portalens<br />

eksisterende videoer.<br />

3. Klik på ”<strong>Video</strong> management” i top menuen.<br />

4. Herefter skal man følge de 5 nedenstående trin(Trin 1: Mediefiler, Trin 2: Metadata, Trin 3:<br />

Thumbnail, Trin 4: Kategorier, Trin 5: Embed) for at uploade en video i Qbrick.<br />

Trin 1: Mediefiler<br />

1. Klik på [+ Tilføj mediefil]<br />

2. Klik på ”Upload fil”<br />

2


Resultat: Der åbnes ”Upload fil” vindue, hvor du skal vælge den råvideo du vil uploade.<br />

3. Klik på "Vælg profil" ’s dropdown felt og vælg ”HD 16:9 + mobile”.<br />

4. Nu skal du klikke på [Select file..]. Der åbnes et nyt vindue, hvor du har mulighed for at vælge den<br />

video, der skal uploades. <strong>Video</strong>en skal være gemt i mappen S:\KPMA\VIDEO<br />

5. Klik på knappen [Næste]<br />

Resultat: <strong>Video</strong>en er nu uploaded. Det tager ca. 5 gange længden af videoen, før den er klar til at<br />

blive afspillet. Fx en video på 2 minutter tager ca. 2x5=10 minutter til den er klar. En email sendes<br />

3


fra Qbrick til den oplyste mail adresse, når videoen er uploaded.<br />

Trin 2: Metadata<br />

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<br />

disse data dels fordi de vil være synlige for brugeren dels fordi de skal angives, når videoen uploades. Vi har<br />

brug for:<br />

1. En overskrift(titel) til videoen - den kommer brugeren til at se, når musen holdes hen over videoen.<br />

2. Beskrivelse (description) - en kort beskrivelse af, hvad videoen handler om, som kommer til at stå<br />

under videoen.<br />

3. Tags – her skriver man alle de tænkelige ord, en bruger kan finde på at søge på. Tag words er ikke<br />

synlige i playeren.<br />

4


Trin 3: Thumbnail<br />

En Thumbnail oprettes automatisk, når du uploader videoen. Hvis du ikke vil ændre Thumbnail’en skal du<br />

klikke på knappen [Næste] for at komme videre til næste trin.<br />

Hvis du vil ændre det, skal du følge enten trin b eller c:<br />

5


a. Under ”Aktuel” kan du se den automatisk valgte thumbnail<br />

b. Under ”Generer” kan du generer et thumbnail billede fra videoen<br />

1. Klik på [Play] knappen, og afspille videoen<br />

2. Klik på den røde cirkel knap [Click to generate] for at tage et snap-shot(billede).<br />

3. Klik på [Gem]<br />

c. Under ”Upload” kan du uploade et billede fra din computer.<br />

6


1. Klik på [Browse] og find billedet i din computer<br />

2. Klik på [Gem] hvis du vil gemme billedet, eller [fjern], hvis du fortryder valget af billedet.<br />

Trin 4: Kategorier<br />

1. Sæt et hak ved den kategori videoen hører til.<br />

2. Klik på [Gem]<br />

7


Trin 5: Embed<br />

1. Bestem størrelsen til videoen. Se video matrixen på første side i dette dokument.<br />

2. Klik på knappen [Preview] for at se videoen i den bestemte størrelse.<br />

3. Du skal bruge iframe koden til at vise videoen på atp.<strong>dk</strong><br />

De næste trin vejleder dig i, hvordan du oploader videoen under privat, erhverv og omatp.<br />

8


WCM: Embed video på Privat og erhverv<br />

For at embede fil m på Privat og Erhverv, skal der først oprettes en html komponent og derefter skal der<br />

linkes til denne fra en indholdsside.<br />

1. Bestem video størrelsen. Se video matrixen på første side i dette dokument.<br />

2. Kopier nu iframe koden:<br />

a. Marker iframe koden(ctrl +a)<br />

b. Kopier koden (ctrl + c)<br />

3. I WCM skal der oprettes en HTML komponent.<br />

a. Klik på knappen [Ny]<br />

b. Vælg ”Komponent” og derefter ”HTML”<br />

Resultat: Der åbnes nu en tom HTML komponent side, som skal udfyldes. Sørg for at give filen et navn som<br />

giver mening for andre brugere i WCM. Fx ”Film_Omatp_profil_introduktion til atp koncernen”<br />

9


4. Den kopierede iframe kode indsættes i komponenten.<br />

5. Find den pågældende indholdsside videon skal vises i og gå ind i koden.<br />

6. Indsæt denne komponent tag-kode: <br />

7. Kopier navnet på HTML komponenten og indsætte det i komponent tag- koden på indholdssiden.<br />

8. Resultat: HTML komponent navnet er nu sat ind på siden:<br />

10


9. Gem siden<br />

10. Vælg ”Vis resultat”<br />

11. Gem og go<strong>dk</strong>end siden<br />

12. Resultat: <strong>Video</strong>en er nu lagt på!<br />

Indsætning af video på en ordningsforside<br />

Når du åbner en ordningsforside, kan du vælge imellem 3 faneblade:<br />

1. Klik på fanebladet ”Indhold”<br />

2. Længere ned på siden kan du se(nedenstående billede):<br />

1. Klik på ”Vælg komponent”<br />

2. Resultat: Der åbnes dialogboksen ”Vælg komponent”<br />

3. Gå til ”Komponenter/HTML” og find den HTML komponent, du skal bruge.<br />

4. Klik på [OK].<br />

11


WCM: Embed video på Om ATP<br />

1. Bestem video størrelsen. Se video matrixen på første side i dette dokument.<br />

2. Kopier nu iframe koden<br />

a. Marker iframe koden<br />

b. Højreklik<br />

c. Kopier<br />

3. I WCM skal der oprettes en HTML komponent.<br />

a. Klik på knappen [Ny]<br />

b. Vælg ”Komponent” og derefter ”HTML”<br />

Resultat: Der åbnes nu en tom HTML komponent side, som skal udfyldes. Sørg for at give filen et navn som<br />

giver mening for andre brugere i WCM.<br />

12


4. Den kopierede iframe kode indsættes i komponenten.<br />

5. Find den pågældende indholdsside og gå ind i koden.<br />

6. Indsæt denne komponent tag-kode: <br />

7. Kopier navnet på HTML komponenten og indsætte det i komponent tag- koden på indholdssiden.<br />

Resultat: Komponent navnet er nu sat ind i tag-koden:<br />

13


8. Gem siden<br />

9. Vælg ”Vis resultat”<br />

10. Gem og go<strong>dk</strong>end siden<br />

11. Resultat: <strong>Video</strong>en er nu lagt på!<br />

Indsætning af video under mediesektionen<br />

Når du åbner en ordningsforside, kan du vælge imellem 3 faneblade:<br />

3. Klik på fanebladet ”Indhold”<br />

4. Længere ned på siden kan du se nedenstående billede:<br />

5. Klik på ”Vælg komponent”<br />

6. Resultat: Der åbnes dialogboksen ”Vælg komponent”<br />

7. Gå til ”Komponenter/HTML” og find den HTML komponent, du skal bruge.<br />

8. Klik på [OK].<br />

Resultat: Nu er komponenten sat under mediesektionen på siden.<br />

14


Åben video i en lightbox under Om ATP<br />

<strong>Video</strong> lightbox bruges kun, når vi vil vise en stor video ved at klikke på et spot-billede eller tekst link. Der<br />

findes 2 metoder til at gøre dette på:<br />

Metode 1: Ved at oprette en video-skabelon<br />

Metode 2: Ved at bruge ”Direct link”<br />

Metode 2 er nemmest at bruge, men kan ikke bruges på et spot-billede.<br />

Metode 1: Åben videoen i en lightbox ved at oprette en video-skabelon<br />

Trin 1: kopier embed koden fra Qbrick<br />

1. Her skal du huske at ændre video størrelsen til 768x432 px. Se video matrixen på første side i dette<br />

dokument.<br />

2. Kopier nu iframe koden<br />

a. Marker iframe koden (ctrl +a)<br />

b. Kopier koden (ctrl +c)<br />

Resultat: Nu har du kopieret koden, som du senere skal sætte ind i en video-indholdsside.<br />

15


Trin 2: Opret en ny video-indholdsside<br />

1. Klik på knappen [Ny]<br />

2. Vælg ”Indhold”<br />

3. Du skal nu vælge video-skabelonen ”x90 <strong>Video</strong> (Om ATP)” og klik på [OK]<br />

Resultat: Der åbnes nu en tom video-indholdsside, som skal udfyldes. Sørg for at give filen et navn som<br />

giver mening for andre brugere i WCM.<br />

16


4. Længere ned på video-indholdssiden, kan du finde indhold feltet.<br />

Her skal den kopierede iframe kode indsættes.<br />

Resultat: Nu er video-indholdssiden klare til go<strong>dk</strong>endelse. Følg derfor nedenstående trin.<br />

Trin 3: Gem og go<strong>dk</strong>end video-indholdet<br />

1. Klik på ”Gem og go<strong>dk</strong>end”<br />

2. <strong>Video</strong>-indholdsside skal gemmes under samme strukturområde som det indholdsside(web side),<br />

videoen lightboxen skal vises/åbnes i.<br />

17


Fx <strong>Video</strong>en som vi vil åbne i lightbox handler om atp og skal vises på siden ”Kort om atp”, derfor gemmer vi<br />

video-indholdssiden også under dette webstedsområde.<br />

3. Vælge placeringen ”sidste underordnede”<br />

4. Klik på [OK]<br />

Resultat: Nu er video-indholdssiden halvvejs gennem go<strong>dk</strong>endelsen, den næste knap du skal huske<br />

at klikke på er [Næste trin].<br />

18


5. Klik på [Næste trin].<br />

Resultat: Du har nu gemt din video-indholdsside. Herfra kan du vælge om du vil åbne lightboxen ved at<br />

klikke på et spot-billede(Trin 4) eller tekst link(Trin 5).<br />

19


Trin 4: Åbn video-lightbox ved klik på en spot<br />

Lightbox funktionen er integreret i omatp redigeringsskabeloner, derfor skal hver spot indeholde<br />

nedenstående felt:<br />

Hvis spottet du vil åbne lightboxen i ikke har feltet ovenover, skal du opdatere redigeringsskabelonen for<br />

den pågældende indholdsside. Se afsnit: Sådan opdateres redigerings-skabelonen<br />

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<br />

sættes på billedet så brugeren ved, at der vises en video ved klik på spot-billedet.<br />

Sæt play-ikonen på spot-billedet og link til video-indholdssiden<br />

Kig i video-matrixen på første side og finde ud af hvilken størrelse billede spottet kan have.<br />

1. Find størrelsen for spot/teaserboks billedet.<br />

2. Sæt play ikonen på billedet vha. Photoshop, play knappen kan du finde her:<br />

S:\KPMA\Webgruppen\Vejledninger\WCM\Vejledninger til Digitalisering<br />

3. Gem billedet med play-ikonen i WCM’en.<br />

4. Sæt billedet ind i spottet:<br />

20


a) Klik på [Vælg komponent]<br />

b) Find dit billede med play-ikonen under komponenter/billeder<br />

c) Markér billede komponenten<br />

d) Tryk [OK].<br />

Resultat: Du kan nu dit billede komponent er sat ind på siden.<br />

5. Link til video-indholdsside:<br />

a) Tryk på [Gennemse indhold].<br />

b) Klik dig ned gennem strukturen, til du kommer til den gemte video-skabelon.<br />

c) Markér video-skabelonen.<br />

d) Tryk [OK].<br />

Resultat: Nu linker spot-billedet til video-indholdsside, dvs. videon åbnes i en lightbox, når der<br />

klikkes på spot-billedet.<br />

6. Klik på knappen [Gem] og derefter på [Vis resultat] for at resultatet.<br />

Sådan kunne spot-billedet se ud. Ved på spot-billedet åbnes videoen i en lightbox:<br />

21


Trin 5: Åbn video-lightbox ved klik på et tekstlink<br />

1. Du laver et link ved at placere markøren det sted i tekst editoren, du vil lave dit link.<br />

2. Marker teksten<br />

3. Kopier teksten<br />

4. Herefter klikker du på knappen ”Opret link til LWCM-indhold…” (markeret med rødt ovenfor).<br />

Resultat: Der åbnes dialogboksen ”Indsæt et link”<br />

5. Indsæt den kopierede tekst i felterne ”Linktekst:” og ”Linkbeskrivelse”<br />

6. Tryk på knappen [Gennemse indhold] for at vælge den video-indholdsside, som der skal linkes til.<br />

Resultat: Dialogboksen ”Vælg et element, der skal linkes til” åbnes<br />

7. Vælg nu den video-indholdsside, som du har gemt og ønsker at linke til ved at markere denne.<br />

8. Klik på [OK]<br />

Resultat: Du kommer tilbage til det første vindue, hvor du kan se, hvilken komponent du har valgt at<br />

linke til øverst til højre.<br />

9. Klik på [OK]<br />

Resultat: Nu er teksten klikbar, men videoen åbnes endnu ikke i en lightbox.<br />

22


10. Åbn kode vinduet for ”RTE indhold” og tilføj dette kode: ”class=”lightbox2” i linket.<br />

Resultat: Nu åbnes videoen i lightbox, når man klikker på linket.<br />

23


Metode 2: Åben videoen i en lightbox ved at bruge ”Direct link”<br />

Denne metode kan kun bruges til at åbne videoen i en lightbox ved klik på et tekstlink.<br />

Trin 1: Kopier embed koden fra Qbrick<br />

1. Her skal du huske at ændre video størrelsen til 768x432 px. Se video matrixen på første side i dette<br />

dokument.<br />

2. Kopier nu “Direct link”<br />

a. Marker iframe koden (ctrl +a)<br />

b. Kopier koden (ctrl +c)<br />

Resultat: Nu har du kopieret linket, som du senere skal sætte ind i en indholdsside.<br />

24


Trin 2: Opret et tekstlink<br />

1. Åben en tekst-editor<br />

2. Placer markøren det sted i tekst editoren, du vil lave dit link.<br />

3. Skift til ”Kode” vinduet og sæt nedenstående kode ind:<br />

Tekstlink<br />

Eksempel:<br />

Se pressemødet 2012<br />

Resultat: Nu kan man åbne videoen i en lightbox:<br />

25


Sådan opdateres redigerings-skabelonen<br />

1. Se efter, hvilken redigeringsskabelon er blevet brugt:<br />

a. Klik på knappen [Vis skjulte felter]<br />

b. Skift til fanen ”Indholdindstillinger”<br />

c. Fold ud ”Egenskaber for indhold”<br />

Resultat: Nu kan du se, hvilken redigeringsskabelon er blevet brugt. Fx på indholdssiden vist ovenover har<br />

vi brugt redigeringsskabelonen ”x3 Artikel Normal (OM ATP)”.<br />

2. Herefter klikker du på knappen [Anvend redigeringsskabelon] og vælger den samme<br />

redigeringsskabelon, der er blevet brugt.<br />

3. Se eksemplet nedenunder, sæt et hak kun ved de steder, som er vist:<br />

26


4. Klik på [OK]<br />

5. Klik på knappen [Gem]<br />

Resultat: Nu har du opdateret redigeringsskabelonen og felterne til lightboxen kan nu ses under<br />

hver spot.<br />

27

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!