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