Många frågor som kommer till mig handlar om att kunna ladda upp och strömma video på sin blogg eller sajt. Problemen som de möter är flera. De vanligaste är möjlighet att ladda upp stora filer, vilket film oftast är. Även klassiker som ”jag har filmat och lagt upp ett klipp med min iPad, men de med Windows kan inte se dessa”. Eller tvärtom. Film är fortfarande lite problematiskt, då det inte är lika standardiserat som bild eller ljud.
Idag, när mobiler och plattor finns överallt i skolans värld är också möjligheten till video ett par knapptryck bort. Och med det multimodalitet. Eller bara en liten hälsning från klassen.
I denna lilla genomgång tänkte jag tipsa om ett rätt enkelt sätt att bygga din egna videotjänst á la Youtube. Eller bara att implementera den direkt i din WordPressinstallation (eller skolas WP Multisite), så dina användare kan ladda upp film direkt i sitt inlägg och låta servern göra resten.
Varför ska du serva dina filmer själv, undrar du? Det finns ju tjänster som Youtube och Vimeo. Ja, det finns massor av argument mot detta, men ibland är det värt besväret. Dels vill du kanske äga din data och lagra den på egna servrar i Sverige? Du kanske inte vill ha reklam inbäddad i dina klipp? Eller så vill du slipa trösklarna och göra det ännu lättare att hantera video genom att låta dina användare skippa det extra momentet att ladda upp film till tredjepartstjänst, som Youtube. Eller så tycker du bara att det är kul! 😉
Detta inlägg kräver att du (helst) har en egen server där du kan installera bl a FFMPEG, men även har tillgång till php.ini för att kunna ändra uppladdningsstorlek. Vissa (några få) webbhotell ger dig även denna möjlighet.
Då alla inte har möjlighet till detta, kommer inlägget att dels vända sig till dig som bara vill veta lite mer om problematiken kring video på webben (del 1) och till dig som har möjlighet att kunna göra något åt det (del 2).
DEL 1 | Vad är problemet med video på webben?
Först och främst kanske vi borde titta lite på problematiken med video på webben. Jag tänker inte gå in på djupet, utan endast skumma igenom detta lite förenklat.
Filstorlek
Filmfiler är stora. Och de blir större ju längre de är och ännu större med hög kvalitet. Beroende på var du befinner dig i världen, snurrar film med ett antal fps – frames per second (bilder per skund). I Sverige använder vi oss oftast av 25 fps. Det innebär att din filmfil innehåller 25 bilder per sekund multiplicerat med antalet sekunder som filmen är lång. Många bilder blir det.
Om du här grovt jämför att ladda upp en bild på din blogg med att ladda upp en video som består av tusentals bilder, så förstår du skillnaden.
Videokomprimering
Okej, men det låter ju som att det blir sjukt stora filer. Hur kommer det sig att jag kan kolla på film på Youtube och att filmerna startar på en gång? Borde det inte ta jääättelång tid innan filmen laddats ned?
Dels så komprimerar din kamera redan din film när du filmar, men det är här som programvaran på servern gör sitt.
Vad är då komprimering? Med hjälp av olika codecs kan programvaran ”försämra” filmen på olika sätt och därmed göra filmfilen mindre. Helt enkelt att plocka bort information som vi (helst) inte uppfattar, men också att göra flera olika versioner av din film i olika upplösningar (antal pixlar).
Ett exempel inom ljud är mp3-formatet. En okomprimerad ljudfil som tar upp 30MB utrymme kan med hjälp av komprimering till mp3 bli ca 3MB. Utan att du egentligen hör någon skillnad (och härom tvistar de…).
Dessutom om vi pratar Youtube och liknande sajter, så behöver inte hela filmfilen laddas ned innan uppspelning, utan lite information laddas ned under tiden du spelar filmen. Den strömmas. Men för att det ska fungera behövs också en liten modifiering av din filmfil göras.
Olika format – olika webbläsare
För att göra det hela lite mer problematiskt så funkar inte alla typer av videoformat i alla webbläsare. Om vi tar iPad:ens Quicktime .mov så funkar det klockrent att se i Safari på en MAC, men inte i Internet Explorer på en PC (om inte Quicktime är installerat). Å andra sidan blir det problem om du försöker se en Windows Media fil på en MAC, men det funkar utmärkt på PC:n.
Nu börjar lite standardisering att ske i och med HTML5 på webben och det största formatet är mp4. Det formatet kan ses i de största webbläsarna, men det finns några fler format, exempelvis WebM och ogg, men de glömmer vi nu.
Drömscenariot
Vad vill vi då ha? Säg att jag har en klassblogg. Vi har med mobilen spelat in en liten hälsning från klassen. Jag skriver mitt inlägg och laddar upp filmen direkt i inlägget. Det som då händer – utan att jag behöver göra något – är att servern komprimerar filen och gör ett par olika versioner i olika upplösning i mp4-formatet så att alla kan se filmen. Den som då tittar på mitt inlägg med en liten skärm (mobil) får då en mindre filmfil, men den som sitter vid sin HD-TV får den största filen serverad automagiskt. Servern ser också till att filmen kan spelas upp direkt och därmed strömmas utan fördröjning. I stort sätt samma sak som servrarna gör hos Google när du laddar upp en film till Youtube.
Ett annat alternativ kan också vara att ni vill ha ert egna Youtube. En samlingsplats där ni kan ladda upp film för att senare bäddas in på olika bloggar eller sajter. Så… hur gör vi?
DEL 2 | Installera FFMPEG på servern
Som jag skrev tidigare kräver det (i stort sätt) att du har en egen server. Dels så kräver komprimering en massa CPU-kraft och hårddiskutrymme för att spara filerna på. En annan sak att tänka på är ju också bandbredd. Vi driver dock Kunskapshubben (+ ett gäng andra sajter) på Årstaskolan på detta sätt med ca 500-1000 servade filmer per dag för ca 500kr i månaden i serverkostnad, så det behöver inte kosta multum.
Serversetup:en är LEMP – Linux, Nginx, MySQL och PHP.
Codecs
Det finns en bra guide på HWDMediaShares sajt där de går igenom steg för steg hur du installerar alla codecs som behövs på din server. Om du kör linux, ex Debian/Ubuntu eller liknande.
Följ hela artikeln och installera allt som behövs.
https://hwdmediashare.co.uk/learn/docs/41-advanced-documentation/176-hwdmediashare-video-conversion-tools
Php
När detta är klart är det dags att fixa inställningarna i php.ini
upload_max_filesize = 2000M
post_max_size = 2000M
Detta ger oss möjlighet att ladda upp filer på 2GB, vilket borde räcka en bit.
NginX
Dessutom måste du ändra inställningen i ditt http block i NginX-konfiguration
client_max_body_size 2000m;
WordPress
Nu är det dags att installera plugin:et till WordPress som kommer göra jobbet – Video Embed & Thumbnail Generator.
https://wordpress.org/plugins/video-embed-thumbnail-generator/
Detta plugin funkar som sagt var även i multisite-miljö.
Inställningar
Under inställningar hittar vi ”Video Embed & Thumbnail Generator” och här har vi två flikar. Under ”general” kan vi påverka själva visningsläget. Som att göra spelaren responsiv, välja storlek för embed, möjlighet att sätta genererade tumnaglar som utvald bild och annat.
Under fliken FFMPEG hittar vi alla inställningar som har med komprimeringen att göra. Här måste vi ange sökväg till FFMPEG på vår server samt att vi vill använda qt-faststart för att fixa streaming headers för .h264. Vi kan också välja hur många simultana kodningar vi vill tillåta och det är helt upp till hur mycket er server klarar av.
Själv har jag valt att koda filmerna som 1080p, 720p, 360p samt att ersätta orginalfilen jag laddade upp med en fil i samma upplösning. Detta för att frigöra lite diskutrymme. Dessutom är detta satt att göras automatiskt när jag laddat upp filen.
Längre ned på sidan hittar du kvalitetsinställningarna, samt möjligheten att testa de olika FFMPEG-inställningarna, så du ser att det fungerar.
Dags att testa
När jag laddar upp min filmfil kan ni se att jag satt uppladdningsgränsen till 500MB på denna sajt (som jag betalar 150 kr i månaden för och driver ett gäng webbplatser på).
Om vi nu går in under ”verktyg” > ”video encode queue” kan vi se hur det går.
Då skapar vi ett inlägg och väljer som vanligt filen från ”lägg till media”.
Plugin:et lägget då till lite shortcode och allt är klart. Jag lägger in det filmklippet här nedan, så ni kan se hur det ser ut ”på riktigt”.
En responsiv player där jag kan välja kvalitet på filmen enligt de val jag gjorde tidigare om hur filmen skulle kodas.
OBServera! Om du väljer inställningen att ersätta orginalet, se till att användarna laddar upp sin film först till mediabiblioteket och skriver inlägget därefter och lägger till filmen.
Om du exempelvis laddar upp en .mov direkt i inlägget så kommer ju filen att bytas ut mot en .mp4 när den kodad klart och då kommer inte filen att hittas. Det är ju i och för sig bara att lägga till mediat igen, men ett tips ändock.
Nya Kunskapshubben
Som avslutning är det precis så här jag byggt nya Kunskapshubben. Efter att ha tuffat på i Joomla under en massa herrans år var det dags att ta steget över till WordPress. Än så länge funkar allt toppen även om jag har många hundra filmer som ska flyttas över.
Lycka till och ta gärna frågor i kommentarsfältet!
