Online portals for educational multimedia content are bottlenecks both in administrative and performance aspects. Administrative bottlenecks are the procedures required to upload and maintain content by creators, as well as shortages in functionality offered to clients. Performance bottlenecks are times when clients may not be able to view content because of server-side congestion. Client-side replay is a solution for both these problems. Educational material, with several types of multimedia content, can be packed into a single binary file which can later be opened, parsed, and replayed by a Javascript player inside the browser. A side feature is that such files can also be replayed offline from a file in local filesystem. This paper presents a prototype for such a player.

2. .
YALMS: Yet Another LMS
V
A
S
Step 1: Record
C
Long-Term
StorageLecturer
Files
YALMS
Robot
Viewers
HTML5
Step 2: Annotate
Lecturer
S
YALMS
Robot
01 myself+1 "YALMS: A Data Structure for Storage and Replay of Multimedia Content in Digital Classes" IEICE・LOIS研 (2014)
06 myself+0 "Homepage of the YALMS.format Subproject" https://github.com/maratishe/yalms.format (2015)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 2/17
...
2/17

3. .
The MultiFile Player (trivial)
• traditional method
• HTML + MP4 + PNG + ... files
• user needs to download and
unpack (ZIP, RAR, TBZ, ...)
• no way to have a fully
browser-based interface
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 3/17
...
3/17

4. .
Dev: Components
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 4/17
...
4/17

5. .
HTML5 Features
• native binary: no need to
convert, used to be BSON,
JSON, etc.
• WebSockets: streaming
• Workers: multicore
• FileReader: read access to
local filesystem
• saveAs: trigger file download
(binary OK)
08 "HTML5: W3C Working Draft" http://www.w3.org/TR/html5/ (2015)
09 "File API: W3C Working Draft" www.w3.org/TR/FileAPI (2015)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 5/17
...
5/17

6. .
Binary + saveAs (auto download)
• saveAs() is not part of HTML5 standard! -- but too good to give up
• can use standard INPUT type="file" dialogs to get filepath/name
• the other side of FileReader
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 6/17
...
6/17

7. .
VIDEO: Access to Raw Buffer
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 7/17
...
7/17

8. .
WebSocket Aggregator
Network
Web Server
Chrome Browser
Control
…….
Buffer
User
WebSocket
WebWorker
WebSocket
WebWorker
WebSocket
Server
WebSocket request
fork()
Handshake
02 myself+0 "A Practical Software Model for Content Aggregation in Browsers...." 2nd COMPSAC/MVDA (2013)
03 myself+0 "Experiments with application throughput in a browser with full HTML5 support" IEICE ComEx (2013)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 8/17
...
8/17

9. .
WebSocket Aggregator in Action
03 myself+0 "Experiments with application throughput in a browser with full HTML5 support" IEICE ComEx (2013)
07 myself+0 "WebSockets, WebWorkers, and Raw Binary in Chrome" https://github.com/maratishe/msaplayer (2015)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 9/17
...
9/17

10. .
The Offline/SingleFile Player
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 10/17
...
10/17

11. .
The Offline/SingleFile Objectives
PNG
Replay Screen
VIDEO
S
A V
MISC. C
Browser
Webapp
Internet
Local filesystem
(FileReader )
PNG
VIDEO
Down-
loads
• with/without Internet,
both OK
• when with Internet, can also
use Cloud APIs (Dropbox,
GoogleDrive)
• 3 functions
1. PNG -- screen, slide pages
2. VIDEO -- raw buffer
access
3. Download -- saveAs
04 Z.Pan+5 "Technologies for E-Learning and Digital Entertainment" 1st Edutainment (2006)
05 A.Ram+1 "Video Analysis and Repackaging for Distance Education" Springer (2012)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 11/17
...
11/17

12. .
YALMS: Encoding Design
V
A
S
Step 1: Record
C
Lecturer
YALMS.format
YALMS
Robot
Watch
filesystem
Watch
scene
change
Step 2: Add PDF
Lecturer
S
A
V
SE
CE
PE
Annotation
SEX
• no need to be online, offline/
cloud processing OK
• encoding format --
headers, payload, etc. at 01
• in the end, becomes one file
01 myself+1 "YALMS: A Data Structure for Storage and Replay of Multimedia Content in Digital Classes" IEICE・LOIS研 (2014)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 12/17
...
12/17

13. .
Screen Encoding: Effective?
0 10 20 30 40 50 60 70 80 90
Time sequence of pages/frames
0.8
1.6
2.4
3.2
4
4.8
log(binarydiff)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 13/17
...
13/17

14. .
Binary Diffs for Screen Encoding
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 14/17
...
14/17

15. .
Binary Diff + Multicore (workers)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 15/17
...
15/17

16. .
Wrapup
• Offline/SingleFile player is already a reality, based on:
1. FileReader 08 and saveAs()
2. access to raw VIDEO buffer 03
3. binary diff and related compression/encoding 01
08 "HTML5: W3C Working Draft" http://www.w3.org/TR/html5/ (2015)
03 myself+0 "Experiments with application throughput in a browser with full HTML5 support" IEICE ComEx (2013)
01 myself+1 "YALMS: A Data Structure for Storage and Replay of Multimedia Content in Digital Classes" IEICE・LOIS研 (2014)
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 16/17
...
16/17

17. .
That’s all, thank you ...
M.Zhanikeev -- maratishe@gmail.com -- Clientside/Offline (onefile) Lecture Player in a Web Browser -- http://bit.do/marat150523 17/17
...
17/17