Curtains Up! Lights, Camera, Action!Documenting the Creation ofTheater 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, [email protected]
2 Inria Grenoble Rhône-Alpes / LJK Laboratoire J. Kuntzmann - IMAGINE, France [email protected]
3 CNRS, Université de Nantes, LINA – UMR 6241, France [email protected]
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.
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
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:
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).
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.
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
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
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, orldf-query-polling-response events for polling.
Google Confidential and Proprietary
Bringing it all together
<polymer-hypervideo>
<polymer-track-subtitles>
<polymer-track-chapters>
<polymer-visualization-timeline>
@alternative-views
<polymer-ldf-client>
Inter-scene navigation shows progress and allows for genetic analysis.
Scene 7–9Day 1
Scene 7–9Day 8
Scene 7–9Day 40
Google Confidential and Proprietary
Bringing it all together
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