November 21, 2015

HTML5 video

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="/tovare/video/mario.mp4" type="video/mp4">
  Nettleseren din støtter ikke video.
  <track label="Bokmål" kind="subtitles" srclang="nb" src="/tovare/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" src="/tovare/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" src="/tovare/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="/tovare/video/mario.jpg" controls>
  <source src="/tovare/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
     src="/tovare/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn"
     src="/tovare/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en"
     src="/tovare/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="/tovare/video/mario.jpg" controls>
  <source src="/tovare/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
    src="/tovare/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" 
    src="/tovare/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" 
    src="/tovare/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)

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](https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/DeployingHTTPLiveStreaming/DeployingHTTPLiveStreaming.html)

Fila ble generert med:

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

Taggen ser nå slik ut:

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

<!-- Spilles av Chrome på Mac og andre enheter som ikke foretrekker HLS -->
   <source src="/tovare/video/out.mp4" type="video/mp4">
   <track label="Norsk" kind="subtitles" srclang="nb" src="/tovare/video/mario.vtt" default>
   <track label="Nynorsk" kind="subtitles" srclang="nn" src="/tovare/video/mario_ny.vtt">
   <track label="Engelsk" kind="subtitles" srclang="en" src="/tovare/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å.

Dette er ganske awesome

Enig
Uenig


Andre referanser

StreamingMedia Readers Choice 2015

Winnere 2015 readers choice:

Media Server

  • Winner:
    • Wowza Media Systems Wowza Streaming Engine
  • Runners-Up
    • Adobe Media Server
    • Unified Streaming Unified Origin

Encoding software

  • Winner:
    • FFmpeg
  • Runners-Up
    • Sorenson Squeeze Desktop 10
    • Telestream Episode

© Tov Are Jacobsen 2016