All Authors: Thomas Steiner, Rémi Ronfard, Pierre-Antoine Champin, Benoît Encelle and Yannick Prié

1. Curtains Up! Lights, Camera, Action!
Documenting the Creation of
Theater and Opera Productions with
Linked Data and Web Technologies
Thomas Steiner,1
Rémi Ronfard,2
Pierre-Antoine Champin,1
Benoît Encelle,1
and Yannick Prié3
1
CNRS, Université de Lyon, LIRIS – UMR5205, Université Lyon 1, France
{tsteiner, pierre-antoine.champin}@liris.cnrs.fr, benoit.encelle@univ-lyon1.fr
2
Inria Grenoble Rhône-Alpes / LJK Laboratoire J. Kuntzmann - IMAGINE, France
remi.ronfard@inria.fr
3
CNRS, Université de Nantes, LINA – UMR 6241, France
yannick.prie@univ-nantes.fr

2. Google Confidential and Proprietary
Project background
French ANR project spectacle en ligne(s) with the objective to create a
video corpus of live theater and opera rehearsals and to explore the
uses of this archive for pedagogic, research, and mediation purposes.

3. Google Confidential and Proprietary
Hypervideo
A hypervideo is a displayed video stream that contains embedded
user-clickable anchors and annotations, allowing for navigation
between the video and other hypermedia elements.
Wikimedia Commons http:
//commons.m.wikimedia.
org/wiki/File:Chirp1_-_BBB_-
_reduced_snapshot.png
Hypervideo with actor annotation and outbound link

4. Google Confidential and Proprietary
Web Components
Web Components is a set of W3C specs, which let Web developers
leverage their HTML, CSS, and JavaScript skills to build their own
custom elements that can be reused easily and reliably:

5. Google Confidential and Proprietary
Web Components
Shadow Root encapsulates the underlying “native” HTML elements.
CSS rules apply just to the particular custom element, allowing for
reusable isolated widgets.
Custom JavaScript events can be fired and listened for (like, for
example, hypervideo-time-update).

6. Google Confidential and Proprietary
Contributions (I)
Created (and released as open source) Web Components for the
creation of hypervideos.
<polymer-hypervideo> The parent element with alternative views.
<polymer-data-*> Specific and generic data annotation elements.
<polymer-data-actor> For annotating actors.
<polymer-data-overlay> For adding free-form HTML annotations.
<polymer-data-annotation> For generic annotations (invisible)
<polymer-track-*> Enriched WebVTT track elements.
<polymer-track-subtitles> Provides a searchable subtitles widget.
<polymer-track-chapters> Provides a thumbnail chapters overview.
<polymer-visualization-*> Provides visual widgets.
<polymer-visualization-timeline> Creates an interactive timeline.
<polymer-visualization-toc> Provides a TOC of all elements.

7. Google Confidential and Proprietary
Our Web Components in action
<polymer-hypervideo>
<polymer-data-overlay>
<polymer-track-subtitles>
<polymer-track-chapters>
<polymer-visualization-timeline>
<polymer-visualization-toc>
@alternative-views

8. Google Confidential and Proprietary
Linked Data Fragments data portal
Made the project’s metadata available via Linked Data Fragments.
SPARQL queries over the Web on commodity
hardware via triple pattern fragments

9. Google Confidential and Proprietary
Contributions (II)
Created (and released as open source) a Web Component for querying
Linked Data Fragments sources in a streaming and polling way.
Sends out ldf-query-streaming-response-partial and upon finishing
ldf-query-streaming-response-end events for streaming, or
ldf-query-polling-response events for polling.

10. Google Confidential and Proprietary
Bringing it all together
<polymer-hypervideo>
<polymer-track-subtitles>
<polymer-track-chapters>
<polymer-visualization-timeline>
@alternative-views
<polymer-ldf-client>

11. Inter-scene navigation shows progress and allows for genetic analysis.
Scene 7–9
Day 1
Scene 7–9
Day 8
Scene 7–9
Day 40
Google Confidential and Proprietary
Bringing it all together

12. Google Confidential and Proprietary
Conclusions
Created and evaluated for usefulness and feasibility a set of hypervideo
and Linked Data Fragments Web Components and made the task of
creating rich hypervideos accessible to everyday Web developers.
Live demo: http://spectacleenlignes.fr/hypervideo/
Hypervideo Web Components:
https://github.com/tomayac/polymer-hypervideo
Linked Data Fragments Client Web Component:
https://github.com/tomayac/polymer-ldf-client
The slides: http://bit.ly/curtains_up
The paper: http://bit.ly/camera_action