Implementation of Hyperlinks in videos with HTML5


Published on

This presentation was presented by Rolf Fricke, Condat AG, during Xinnovations 2012 in Humboldt University in Berlin on September 11th, 2012.
The main objective of the LinkedTV project is the integration of hyperlinks in videos to open up new possibilities for the interactive, seamless usage of video on the Web. One challenge is the placement of tags and hyperlinks above the video layer, which should be closely associated to the underlying media fragments for persons or objects shown in the video. As the media fragments dynamically appear, move and disappear a precise synchronization of the overlays and related media fragments is needed. We plan to implement these features together with further user interface features on the basis of the HTML5 elements video, CSS3 and web workers. As we target WebTV as well as Broadcast TV, we plan to provide a restricted HbbTV 1.1 implementation for TV-sets, but we finally expect to profit from a HTML5 integration in upcoming HbbTV releases.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Planungsprozess 2009 FF
  • Implementation of Hyperlinks in videos with HTML5

    1. 1. Xinnovations 2012W3C Days, 10./11.9.2012 Implementation of Hyperlinks for Videos with HTML5 Rolf Fricke, Condat AGt
    2. 2. Condat® AG TV- / Media Mobile Web Rolf Fricke R&D Alt-Moabit 91 d 10559 Berlin Tel. +49-30-3949-1109 rf@condat.deCondat AG 2
    3. 3. EU-FP7 Project Project: LinkedTV - Television linked to the Web FP7 Objective: ICT Networked Media and Search Systems Duration: 10/2011 - 3/2015 Partner: Name Country Fraunhofer IAIS Germany CERTH Greece University of Economics Prague Czech Republic CWI Holland Eurecom France University of St Gallen Switzerland STI Austria Condat Germany Noterik Holland Sound and Vision Holland University of Mons Belgium RBB GermanyCondat AG 3
    4. 4. Motivation for LinkedTV Fast growing relevance of Video: Videoportals TV Live Channels in Deficits: the Web Video still isolated in the IPTV Web without: ... search in the video stream hyperlinks annotations only complete download ....Condat AG 4
    5. 5. LinkedTV Objectives Convergence of TV and Web with rich browsing experience by: Search for "Claude Hyperlink Trichet" Angela Merkel Angela Merkel Tags for WebTV with Browsers (HTML5) and TV-Sets (HbbTV)Condat AG 5
    6. 6. development of tools for Video analysis for speech, subtitels, shots/scenes, text to identify relevant objects, persons, events ... Named Entity Recognition and Semantic Enrichment using the Link Data Cloud (LoD) Personalization / Filtering ....Condat AG 6
    7. 7. Mock-up "Convergence of TV and Web" AG 7
    8. 8. W3C Recommendation for Media Fragments Source R. Troncy [2]Condat AG 8
    9. 9. W3C Recommendation: Media Fragments URI 1.0,0,320,240&t=10, 20&track=vid spat time trackCondat AG 9
    10. 10. Positioning of Tags and Hyperlinks above Media Fragments Angela Merkel Angela Merkel Angela Merkel Angela Merkel Angela Merkel Angela Merkel Angela Merkel Angela Merkel t= 0 3 7 Angela Merkel Merkel Tag above "AngelaSteps Merkel" Hyperlink above1. Show video "Claude Trichet"2. Draw tags above MFs3. Display tags during specified time frame Media4. Eventhandling "mouse Fragments over" / "Click on Hyperlink" // MF Angela Merkel:,60,320,240&t=3,7&track=vidCondat AG 10
    11. 11. HTML5 ImplementationCondat AG 11
    12. 12. 1) Show Video by HTML5 video tag to play, stop, rewind the videoCondat AG 12
    13. 13. 2) Draw Tags above Media Fragments by CSS3 using: MF spatial rectangle to place tags at right position in the video z-index for placement above video layer relative positioning make tags move with the videoCondat AG 13
    14. 14. W3C Demonstrator: AG 14
    15. 15. 3) Display Tags during specified time frame precise synchronisation of tags with underlying video objects is triggered by HTML5 video timeupdate event and uses currentTime attribute uses Media Fragments time parameter to determine display time spanCondat AG 15
    16. 16. Display Tags above Moving Media Fragments upcoming MF Specificiations are planned to support also moving Fragments: Stork precise drawing of tag trajectory requires fast fire rates for timeupdate event up to 60 frames per second (ca. 15 ms) HTML5 allows setting fire rates or timeupdate between 15 and 250 ms many Browsers only support between 100 - 250 ms (such as Firefox) use of setTimeout() function allows faster update rates also for this BrowsersCondat AG 16
    17. 17. 4) Eventhandling "Mouse over", "Click/Touch" on Hyperlink by DOM event model: onmouseover event to show additional info to an object onclick / ontouchmove event to activate hyperlinks placed above MF objectCondat AG 17
    18. 18. Parallel execution of Video, DB access, HTML display Parallel execution of several tasks may harm (for less powerful CPUs): smooth display of video synchronized display of tags, device pointers and underlying objects. Solution: use HTML5 Web Workers to run scripts as separate threads for fetching MF objects stepwise from DB drawing UI elements above the video layerCondat AG 18
    19. 19. HbbTV Implementation LinkedTV plans restricted HbbTV 1.1 implementation for TV Sets hopes to profit from integration of HTML5 elements in HbbTV intended uptake of HTML5 for HbbTV still under discussion, since combined use of TV sets for broadcast and internet access not allow direct uptake of HTML5 video element (HbbTV triggers load of HTML pages by stream events in Broadcast protocol) should consider weak CPUs of TV Sets have no pointing deviceCondat AG 19
    20. 20. References 1. Silvia Pfeiffer: A definitive Guide to HTML5 Video, 2010, apress 2. Raphael Troncy, Addressing and Annotating Multimedia Fragments, Paris, April 2012 3. 4. 5. 6. AG 20
    21. 21. More Information: @linkedtvCondat AG 21