Hypervideo and Annotations on the Web Madjid Sadallah Olivier - - PowerPoint PPT Presentation

hypervideo and annotations on the web
SMART_READER_LITE
LIVE PREVIEW

Hypervideo and Annotations on the Web Madjid Sadallah Olivier - - PowerPoint PPT Presentation

Hypervideo and Annotations on the Web Madjid Sadallah Olivier Aubert Yannick Pri LIRIS - Claude Bernard University Lyon 1 / CERIST, Alger MMWeb 2011 Graz, Sept. 8th LIRIS Lyon Research Center for Images and Intelligent Information


slide-1
SLIDE 1

Hypervideo and Annotations

  • n the Web

Madjid Sadallah Olivier Aubert Yannick Prié LIRIS - Claude Bernard University Lyon 1 / CERIST, Alger

LIRIS – Lyon Research Center for Images and Intelligent Information Systems UMR 5205 – CNRS/INSA-Lyon/Université Lyon 1/Université Lyon 2/Centrale Lyon http://liris.cnrs.fr/

MMWeb 2011 – Graz, Sept. 8th

slide-2
SLIDE 2

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 2/17

Context

  • Audiovisual metadata is essential
  • (incomplete) definitions :

– (AV) Annotation : any piece of data linked to

an audiovisual fragment

– Augmented/annotated video : video

augmented with annotation data

  • What for?

– Search / retrieval – Linking – Navigation – Visualisation

slide-3
SLIDE 3

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 3/17

Visualisation

  • Variety of visualisation modalities
  • T

wo different goals:

– Find the most appropriate visualisation for the

annotations for the current task

– Do not too tightly bind the annotations and

their visualisations (prevents reusability)

► empower users with the ability to define their own visualisations

slide-4
SLIDE 4

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 4/17

Hypervideo

  • T

erm used by T ed Nelson (1960s)

  • A definition : interactive video-centric

hypermedia document built upon an audiovisual content augmented with data in a time synchronized way

  • T

wo dimensions :

– Hypermedia – Video-centered

slide-5
SLIDE 5

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 5/17

Hypervideo specificities

  • Annotations mandatory to address/augment

video content

  • Variety of visualisation modalities
  • Space/time disorientation more pregnant
  • Cognitive load / time pressure
  • Rhetorical and aesthetic challenges
slide-6
SLIDE 6

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 6/17

Advene principle

Resources Queries

shot 1 shot 2 shot 3 shot 4 shot 5 shot 6 title: 'Meeting' title: 'Mission'

View definitions: templates, rules...

document 1.pdf

Structure schema

Shot Episode Document Panel Related shot

Package

panel1 panel2

Annotation structure Annotations

slide-7
SLIDE 7

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 7/17

Advene lessons

  • Validated vision of hypervideo concepts and

annotation usage

  • But : poor bet on visualisation emergence –

did not meet appropriate users

– Need to provide bootstrap

components/examples

– With appropriate level of malleability /

expressivity

slide-8
SLIDE 8

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 8/17

CHM : Component-based Hypervideo Model

  • Main goals :

– Conceptual and implementable model – Explicit annotation decoupling – Expressivity / simplicity

slide-9
SLIDE 9

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 9/17

General overview

slide-10
SLIDE 10

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 10/17

Core concepts

  • Timeline reference

– Linked to a Media Player – Attributes : position / duration / status

  • Components

– Visual / non-visual – Timeline-based / non-timeline-based

slide-11
SLIDE 11

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 11/17

Data model

  • Advene / Cinelab model

www.advene.org/cinelab

  • Annotation :

– Video reference – Start/end timecodes – T

ype (identifier)

– Content

slide-12
SLIDE 12

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 12/17

CHM Plain components

slide-13
SLIDE 13

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 13/17

CHM High-level components

Component AnnotationReader T ableOfContent Map Transcription Timeline ...

slide-14
SLIDE 14

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 14/17

WebCHM – an implementation

  • Extended HTML with namespaced attributes
  • Client-side javascript library
  • Reuses libraries (mediaelement.js, timesheet)
  • Extensible
slide-15
SLIDE 15

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 15/17

Simple example : T

  • C

<div chm:component="jsonreader" id="data" chm:src="data.json" > <div chm:component="videoplayer" id="tr" chm:src="video.ogv" > <div chm:component="toc" chm:src="data" title="Story parts" chm:filter="type=='Parts'" chm:content="${content}" chm:timelineref="tr" >

slide-16
SLIDE 16

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 16/17

Conclusion

Documentation and prototype available at http://advene.org/chm/

  • Future work :

– Extend model/vocabulary – Improve visual/interaction design – Complete implementation – Authoring environment – Cognitive studies

slide-17
SLIDE 17

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 17/17

The End

Thank you for your attention.

slide-18
SLIDE 18

Hypervideo and Annotations

  • n the Web

Madjid Sadallah Olivier Aubert Yannick Prié LIRIS - Claude Bernard University Lyon 1 / CERIST, Alger

LIRIS – Lyon Research Center for Images and Intelligent Information Systems UMR 5205 – CNRS/INSA-Lyon/Université Lyon 1/Université Lyon 2/Centrale Lyon http://liris.cnrs.fr/

MMWeb 2011 – Graz, Sept. 8th

slide-19
SLIDE 19

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 2/17

Context

  • Audiovisual metadata is essential
  • (incomplete) definitions :

– (AV) Annotation : any piece of data linked to

an audiovisual fragment

– Augmented/annotated video : video

augmented with annotation data

  • What for?

– Search / retrieval – Linking – Navigation – Visualisation

  • importance : evidence
  • ATM, metadata is mostly limited to ressource

metadata

  • Bridge the semantic gap
  • Search : first thing that comes to mind. Need to

cross the semantic gap though, it is the aim of many projects

  • Linking : in the LinkedData perspective, AV cannot

directly be linked. Need additional layers (annotations)

  • Visualisation : seems obvious, but often
  • verlooked: once you have found the video

fragments that interest you, how do you visualise them appropriately ?

slide-20
SLIDE 20

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 3/17

Visualisation

  • Variety of visualisation modalities
  • T

wo different goals:

– Find the most appropriate visualisation for the

annotations for the current task

– Do not too tightly bind the annotations and

their visualisations (prevents reusability)

► empower users with the ability to define their own visualisations

  • visualisation of augmented videos
  • «for the task carried out» : essential criterion
  • if we design annotation content with a specific

visualisation in mind, we can prevent the reuse of annotations through other means

  • if we design visualisations too tighly linked with

annotations, it prevents reusability -> lost time. Until know, I have spoken about visualisation in general Will introduce a concept that we think is appropriate

slide-21
SLIDE 21

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 4/17

Hypervideo

  • T

erm used by T ed Nelson (1960s)

  • A definition : interactive video-centric

hypermedia document built upon an audiovisual content augmented with data in a time synchronized way

  • T

wo dimensions :

– Hypermedia – Video-centered

Additional property: video-centered

  • > brings time
slide-22
SLIDE 22

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 5/17

Hypervideo specificities

  • Annotations mandatory to address/augment

video content

  • Variety of visualisation modalities
  • Space/time disorientation more pregnant
  • Cognitive load / time pressure
  • Rhetorical and aesthetic challenges

HV : restriction of generic hypermedia Given the combination of video+annotations ->

  • variety : AV- or annotation-focused (subtitles vs

transcription) / temporal / non-temporal (static) /

  • verview / detailed / synthesis...
  • disorientation : common in hypermedia, but

exacerbated Before going into our proposal of a model for HV, I will give some information about where we come from.

slide-23
SLIDE 23

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 6/17

Advene principle

Resources Queries

shot 1 shot 2 shot 3 shot 4 shot 5 shot 6 title: 'Meeting' title: 'Mission'

View definitions: templates, rules...

document 1.pdf

Structure schema

Shot Episode Document Panel Related shot

Package

panel1 panel2

Annotation structure Annotations

slide-24
SLIDE 24

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 7/17

Advene lessons

  • Validated vision of hypervideo concepts and

annotation usage

  • But : poor bet on visualisation emergence –

did not meet appropriate users

– Need to provide bootstrap

components/examples

– With appropriate level of malleability /

expressivity

These componenfts need to feature appropriate levels of malleability

slide-25
SLIDE 25

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 8/17

CHM : Component-based Hypervideo Model

  • Main goals :

– Conceptual and implementable model – Explicit annotation decoupling – Expressivity / simplicity

  • There are other hypermedia models that introduce

time (AHM + NCM). Our approach is compatible with AHM (but with more focused) HV is a restriction of hypermedia – profit from this constraint

slide-26
SLIDE 26

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 9/17

General overview

HV:based on augmented (AnnotationStructure) video (TimedMedia) HV visualises augmented video through components Layout : very general concept, supposed to use underlying implementation layout mechanism

slide-27
SLIDE 27

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 10/17

Core concepts

  • Timeline reference

– Linked to a Media Player – Attributes : position / duration / status

  • Components

– Visual / non-visual – Timeline-based / non-timeline-based

Visual artifact on screen Non-visual (AnnotationReader, audio player)

slide-28
SLIDE 28

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 11/17

Data model

  • Advene / Cinelab model

www.advene.org/cinelab

  • Annotation :

– Video reference – Start/end timecodes – T

ype (identifier)

– Content

slide-29
SLIDE 29

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 12/17

CHM Plain components

  • basic components
  • used to build more complex components, or can

be used as-is

slide-30
SLIDE 30

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 13/17

CHM High-level components

Component AnnotationReader T ableOfContent Map Transcription Timeline ...

  • emerged from the study of a number of existing

hypervideos

slide-31
SLIDE 31

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 14/17

WebCHM – an implementation

  • Extended HTML with namespaced attributes
  • Client-side javascript library
  • Reuses libraries (mediaelement.js, timesheet)
  • Extensible
slide-32
SLIDE 32

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 15/17

Simple example : T

  • C

<div chm:component="jsonreader" id="data" chm:src="data.json" > <div chm:component="videoplayer" id="tr" chm:src="video.ogv" > <div chm:component="toc" chm:src="data" title="Story parts" chm:filter="type=='Parts'" chm:content="${content}" chm:timelineref="tr" >

slide-33
SLIDE 33

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 16/17

Conclusion

Documentation and prototype available at http://advene.org/chm/

  • Future work :

– Extend model/vocabulary – Improve visual/interaction design – Complete implementation – Authoring environment – Cognitive studies

slide-34
SLIDE 34

www.advene.org www.advene.org MMWeb 2011 – Graz, Sept. 8th MMWeb 2011 – Graz, Sept. 8th 17/17

The End

Thank you for your attention.