README

   1 HTML5TV
   2
   3 This is my attempt to finish my masters degree. I'm just kidding :-)
   4
   5 Actually, in 1997 I had idea to have masters degree on topic of video
   6 delivery over Internet. I was few years too early to make it actually
   7 work, but now-days we have all components needed to create good video
   8 archive on the web.
   9
  10 I envision this as combination of two parts:
  11
  12  * powerful editing suite running locally to annotate video
  13  * good web interface with sync between slides and video
  14
  15
  16 SOURCE MATERIAL
  17
  18 I have some of my presentations in video with slides, but I also have
  19 few of freely available presentations which would benefit from
  20 audio-video slide annotation. So you are assumed to have two files:
  21
  22  1. video file in Ogg Theora format
  23  2. pdf file with slides of presentation
  24
  25 all other meta-data should be stored in git under media/
  26
  27 If you have different file formats, go ahead and use ffmpeg2theora:
  28
  29   http://v2v.cc/~j/ffmpeg2theora/
  30
  31 New Theora encoder 1.1 create videos that are better than anything I saw
  32 on the web, oggz tool has chop support, so extracting part of video is
  33 very easy and possible.
  34
  35
  36 VIDEO EDITING
  37
  38 I really don't want to learn another set of tools. I like mplayer,
  39 it works on all platforms I'm interested in (including EeePC and
  40 PlayStation 3) and i all-ready know keyboard shortcuts for it.
  41
  42 So, I used it over it's slave protocol which is described on
  43
  44   http://www.mplayerhq.hu/DOCS/tech/slave.txt
  45
  46 and available locally as docs/slave.txt which I used to implement new keyboard
  47 commands:
  48
  49   dpavlin@t61p:~/t61p/html5tv$ grep -A10 'keyboard' bin/mplayer.pl
  50
  51         # XXX keyboard shortcuts
  52
  53           $1 eq 'c'  ? repl
  54         : $1 eq ','  ? add_subtitle
  55         : $1 eq 'F1' ? prev_subtitle
  56         : $1 eq 'F2' ? move_subtitle( -0.3 )
  57         : $1 eq 'F3' ? move_subtitle( +0.3 )
  58         : $1 eq 'F4' ? next_subtitle
  59         : $1 eq 'F5' ? save_subtitles
  60         : $1 eq 'F9' ? add_subtitle
  61         : $1 eq 'F12' ? edit_subtitles
  62         : warn "CUSTOM $1\n"
  63         ;
  64
  65 I used to work with semi-professional Sony U-matic video montage back in 1990
  66 and have grown to love it's work flow which doesn't force you to click
  67 all over the screen to do something useful.
  68
  69 In fact, with it, you need 3-5 times more time to finish material,
  70 and with most video editing solutions available in open source,
  71 I needed at least 10-20 times more time to do anything useful.
  72
  73
  74 SUBTITLING
  75
  76 I decided to store subtitles in array-of-arrays in yaml with simple structure
  77 of start,end,title. On every save, I need also to create .srt subtitle format
  78 for mplayer and json data for web interface.
  79
  80 Effective subtitle editing requires preroll. This is feature from my U-matic days
  81 because scopes (U-matic video recorders with magnetic tape) couldn't speed up
  82 instantly, so they would rewind, start AND SHOW YOU FEW SECONDS BEFORE YOUR EDIT.
  83
  84 This is crucial part in implementing following work flow with mplayer:
  85
  86   1. press i to record EDL point (start of subtitle)
  87   2. press i to end EDL (end of subtitle)
  88   3. press , to enter subtitle (usually you want to enter subtitle after end of sentence)
  89   4. preroll 3 seconds before subtitle and review it
  90   5. continue subtitling, goto 1
  91
  92 You can also use F9 to add subtitle (nicely located near i key) or F12 to enter vi
  93 and make bulk subtitle changes (remove empty subtitles and so on).
  94
  95 SLIDES
  96
  97 Subtitles are least common denominator for meta data which I want to preserve.
  98 However, to sync subtitles with slides, I have introduced magic syntax:
  99
 100      [42] slide title
 101
 102 which triggers switch to slide 42.
 103
 104
 105 HTML5 WEB INTERFACE
 106
 107 Web interface using HTML5 <video> tag based on work from BBC R&D TV
 108
 109         http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.html
 110
 111         http://www.bbc.co.uk/blogs/rad/2009/08/html5.html
 112
 113 Which in turn is based on jCarousel from
 114
 115         http://sorgalla.com/projects/jcarousel/
 116
 117 I removed most of nice design, added support for slides and made it
 118 scale to accomodate different resolutions of video materials.
 119
 120
 121 Additional media info (author, title, location, date) is kept in hcalendar.html
 122 using microformat which defines classes. For more info about hCalendar see
 123
 124         http://microformats.org/wiki/hcalendar-cheatsheet
 125
 126
 127 TRY IT OUT
 128
 129 Create media/conference-title/www file with source urls for video and presentation
 130
 131         $ cd media/conference-title
 132         $ wget -nc -i www
 133
 134         # set default video
 135         $ ln -s 20090704183304_dobrica.mts.ogv video.ogv
 136
 137         # create metadata
 138         $ vi hcalendar.html
 139
 140         # setup interface
 141         $ cd www
 142         $ ln -sf ../media/conference-title media
 143         $ cd -
 144
 145         # generate hires slide jpegs using ghostscript
 146         $ ./bin/slides-hires.sh media/conference-title/presentation.pdf
 147
 148         # annotate some material
 149         $ ./bin/mplayer.pl
 150
 151         # resize presentation and show montage preview
 152         $ ./bin/slides-resize.sh
 153
 154 You will probably want to run resize after you made first annotation in mplayer
 155 because you will get visual overview of all available slides which is useful
 156 when typing in slide markers [42] in subtitles.
 157
 158 When slide reisze finish, you might want to open http://localhost/html5tv/www/media.html
 159 in Firefox and check final result.