Inlednig

Att själv omvandla (encoda) video så den passar för webb och sen hitta en bra spelare för att visa video på din WordPress sajt upplevde jag som svårt. Det är en hel djungel av video codecs, audio codecs, programvaror för att anpassa video till webb, spelare som skall fungera i alla webbläsare mm. Så mitt första råd om du vill lägga upp video utan en extern videotjänst som exempelvis YouTube eller Vimeo gör det inte om du inte måste!

Kan du hitta en lösning där du kan använda en extern tjänst och sedan “bädda in” din video på din sajt så är det så mycket lättare och smidigare. Har du begränsad bandbredd på ditt webbhotell så är det också en faktor att tänka på. Men… Om du ändå vill lösa det på egen hand så skall jag ge dig en guide till hur jag gjorde.

Jag kommer hålla mig borta från för mycket olika fackuttryck i denna guide och istället koncentrera mig på att steg för steg tala om hur jag gjorde utifrån mina förutsättningar. Största anledningen till detta är att jag inte har satt mig in (mer än ytligt) i alla olika djuplodande tekniska detaljer kring video på webben, så risken att jag blandar ihop det hela är stor.

Problemet och kravställning

• Man vill kunna publicera video på en inloggningsskyddad sajt med en tight budget.
• Man vill ha kontroll över “var video hamnar” och helst inte behöva ta hänsyn till juridiska avtal från 3e-part som reglerar vem som har nyttjanderätt mm.
• Video skall gå att spela upp i så många webbläsare som möjligt och även i mobila enheter som ex iPhone.

Min lösning

Utvecklingsmiljö:

• Webbhotell: Binero Oderland
• Version av WordPress: 3.2.1 3.5.1
• Plugin för inloggningsskydd och registrering: Absolute privacy
• Video inspelad med: iPhone 4
• Plattform att behandla video på: Mac OS X (iMac 21″)
• Videoredigeringsprogram: iMovie

Lösning på problem, dessa steg skall vi ta oss igenom:

1. Anpassa video till webben (encoda).
2. Installera plugin
3. Ladda upp video via FTP
4. Skapa ett inlägg med rätt “shortcode”

För att anpassa video inspelad från ex en iPhone till webben så får man “komprimera” den till lämplig upplösning. Jag gör detta i iMovie. När import samt redigering av video är klar så väljer jag att exportera till den kvalitet (upplösning + framrate) som passar. I exempel längre ner så har jag valt tre olika exportmetoder i iMovie så att du ser skillnaden. ‘Large (960×450, 25fps)’, ‘Medium (640×360, 25fps)’, och ‘Mobile (480×272, 25fps)’.
Den anpassade videon brukar vara större än vad WordPress inbyggda funktion för uppladdning av media tillåter. För Binero är det för närvarande 48 MB. Därför laddar jag upp den via FTP till /wp-content/uploads.

När sedan video skall publiceras i WordPress så skall man hitta en bra videospelare som uppfyller kraven och som hålls uppdaterad mm. Det finns en hel del alternativ och efter en hel del testande och utvärderande så kom jag fram till att Stream Video Player fungerade bäst för mig. Efter detta plugin är nerladdat och installerat så skapar man ett nytt inlägg och ställer markör där man vill ha sin video och klickar på den nya knappen i menyn.

Troligtvis får du upp följande felmedelande första gången. Om du vill ha möjlighet att aktivera “bädda in din video på andra sajter” så skall du följa anvisningar.

OK, då kör vi igen. Klicka på knappen och ställ in följande (jag har bara tagit med de alternativ jag ändrar, resten är default):

Detta genererar följande shortcode:

[stream provider=video
flv=http://labs.twoway.se/wp-content/uploads/web-demo-mobile-480x272.m4v
img=http://labs.twoway.se/wp-content/uploads/splash.jpg
mp4=http://labs.twoway.se/wp-content/uploads/web-demo-mobile-480x272.m4v
embed=false
share=false
width=640
height=360
dock=true
controlbar=over
bandwidth=high
autostart=false /
]

Resultatet

Kommentar till video: Jag tog det jag hade för tillfället, så grundkvalitet är inte 100% hackar lite ävern i orginal. Får jag tid lägger jag upp något bättre senare.

Exempel 1: iMovie-export 960×450, 21 MB

(Video: Watch this video on the post page)

Exempel 2: 640×360, 9 MB

(Video: Watch this video on the post page)

Exempel 3: 480×272, 5 MB

(Video: Watch this video on the post page)

Några ord om tillägget(plugin) Stream Video Player 1.3.2 1.4.0

• Plugin stödjer video exporterad med “Pseudo streaming” som gör att man kan hoppa fram i video utan att video behöver laddas innan. Dock är inte detta med i denna guide eftersom jag inte hittat den funktionen i iMovie 09. Någon som vet om man kan fixa detta i iMovie?
• Man får upp en egen “admin sektion” där man kan göra fler inställningar men jag går inte in på det här.
• Bästa kombinationen av shortcodes efterfrågas. Ge gärna tips i kommentarerna!

Ge mig fem min av din tid!

För att detta skall bli en så bra guide som möjligt skulle jag vara väldigt tacksam om du kunde svara på dessa frågor i en kommentar till inlägget:

1. Funkar video ovan i din webbläsare och mobila enhet? Och vad har du testat med?
2. Har du någon alternativ lösning? Vilken i så fall.
3. Hur gör ni som kör med Windows för att anpassa (encoda) video för webben. Vilka program använder ni och vilka inställningar kör nin med i dessa program.

Länkar

• Demovideo som har använts i detta inlägg (mobil version). Bra om du vill testa i din egen installation.
• Stream Video Player Plugin
• Stream Video Player Support
• Video on the web – Tung artikel om video på webben från Dive Into HTML5

Embedcode after update to 1.4.0

(Video: Watch this video on the post page)

Only video-tag manually added (works great in iOS-device)