Det beste grensesnittene er å ikke ha noe grensesnitt

Fase 1 - Minimum Viable Prototype - “usynelig” video portal

Eksempel 1:

Bare en fil på en server.

<video width="100%" controls>
  <source src="https://storage.googleapis.com/tovarehome/video/mario.mp4" type="video/mp4">
  Nettleseren din støtter ikke video.
  <track label="Bokmål" kind="subtitles" srclang="nb" src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
</video>

Fase 2 - enda bedre

Eksempel automatisk innbrenning av logo og automatisk generert forhåndsvisning.

Dette kan kjøres som et automatisk script når det kommer en ny fil.

<video width="100%"  poster="="https://storage.googleapis.com/tovarehome/video/mario.jpg" " controls>
  <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
     src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn"
     src=https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en"
     src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
  Nettleseren din støtter ikke video.
</video>

Legge på bilde:

ffmpeg -i mario.mp4 -framerate 30000/1001 -loop 1 -i ello.png -filter_complex "[1:v] fade=out:st=30:d=1:alpha=1 [ov]; [0:v][ov] overlay=10:10 [v]" -map "[v]" -map 0:a -c:v libx264 -c:a copy -shortest out.mp4

Generering av forhåndsvisning:

ffmpeg -i mario.mp4 -ss 00:00:10 -vframes 1 mario.jpg

Automatisk generert tekst-snutt med koden man må lime inn:

<video width="100%"  poster="https://storage.googleapis.com/tovarehome/video/mario.jpg" controls>
  <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
    src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" 
    src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" 
    src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
   Nettleseren din støtter ikke video.
</video>

3 Videre finpuss

Målbildet er at man lemper over filen man har til en katalog man har tilgang til. En modul lytter til filsystemet (Ex. pynotify hvis man lager scriptet i python):

• Gjennomfører filbahandling iht. katalogen man lagret filen i.
• Lager en scriptsnutt i en tekstfil som man kan lime inn.
• Kanskje sende en automatisk epost, når alt er ferdig med instruksjoner for å få videoen inn dit man ønsker (iht. polciy)

Fase 4 Bedre ytelsen på dårlig nett og mobile enheter med IOS, Android og Windows.

Automatisk genererign av HLS og MPEG Dash (Kan serves fra en vanlig http server, så det er valfritt å implementere noe som wowza eller ikke)

I praksis betyr HLS at man splitter opp filen i 6 sekunders-biter (Apple anbefalte tidligere 10 sekunder men har endret anbefalingen til 6), generere en playlist (filtype .m3u8) så vil nettleseren velge en lavere bitrate hvis den ikke henger med.

For Android og Apple-produkter fungerer HLS, så man kan kjøre scriptet under automatisk (Hvis man ikke installerer Wowza):

(For adaptiv strømming på desktop kan man produsere DASH som alternativ source med MP4Box)

• HLS Stream-Creator

Mrk. følgende kan endres i scriptet for å bruke den innebygde “frie” implementeringen:

# Audio codec for the output video. Will be used as an value for the -acodec argument
AUDIO_CODEC=${AUDIO_CODEC:-"aac"}

# Additional flags for ffmpeg
FFMPEG_FLAGS=${FFMPEG_FLAGS:-"-strict -2"}

Dette endrer til den innebygde AAC implementeringen.

I strømmen under får du bilde av meg med vanlig strømming, men uten bilde når HLS blir brukt.

Jeg configuerte følgede mime.types på serveren i tråd med apple sin dokumentasjon

• Apple dokumentasjon

Fila ble generert med:

./HLS-Stream-Creator.sh -i mario.mp4 -s 6 -b 512,1200,2000,3500

Taggen ser nå slik ut:

<video width="100%"  poster="https://storage.googleapis.com/tovarehome/video/mario.jpg"  controls>
<!-- Spilles av på iPhone, Android, Windows Phone osv. -->
<source src="https://storage.googleapis.com/tovarehome/video/output/mario.mp4_master.m3u8"   
   type="application/x-mpegURL">

<!-- Spilles av Chrome på Mac og andre enheter som ikke foretrekker HLS -->
   <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
   <track label="Norsk" kind="subtitles" srclang="nb" src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
   <track label="Nynorsk" kind="subtitles" srclang="nn" src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
   <track label="Engelsk" kind="subtitles" srclang="en" src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
</video>

Et litt lengre eksempel med HLS adaptiv strøm med bitrates 512k,1200k,2000k,3500k (Tov Are Tegner i WiiU Art Academy):

Fase 5 Automatiske opptak fra streaming.

Kan legges automatisk i en dedikert katalog fra f.eks. Wowza.

X Eksperiment

PoC spørsmål i video. Alt som kan gjøres i html kan gjøres i en video på gitte tidspunkter, samt pause videoen automatisk, spille av andre spor osv. På enheter med små skjermer går videoen i fullskjerm, slik at dette ikke alltid er en praktisk måte å gjøre det på.

Oppdatering 2020

Self-hosting av video er et bra alternativ også i 2020 men krever litt forarbeid.

Alle de statiske videofilene er flyttet til google cloud storage og lenkes direkte for å unngå å kjøre proxy via cloudflare.