{"id":45,"date":"2015-04-08T18:46:24","date_gmt":"2015-04-08T18:46:24","guid":{"rendered":"https:\/\/www.w3.org\/community\/webtiming\/?p=45"},"modified":"2015-05-14T19:51:39","modified_gmt":"2015-05-14T19:51:39","slug":"timed-data-and-multi-device-playback","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/webtiming\/2015\/04\/08\/timed-data-and-multi-device-playback\/","title":{"rendered":"Timed data and multi-device playback"},"content":{"rendered":"<p>Hi all, time for a new demonstration!<\/p>\n<p>As we are working on the HTML5 Timing Object, it is nice to visualize how it can be used. \u00a0In this demonstration, we show how we map data onto a timeline. This is loaded into a &#8220;sequencer&#8221; (or MovingCursor) &#8211; basically a generalized track element that can be controlled by an HTMLTimingObject. \u00a0We then play it back using an HTMLTimingObject connected to a Shared Motion. \u00a0This of course includes videos, operations, data and so on. \u00a0This is in contrast to the &#8220;standard&#8221; way of hooking timed data onto a media element, then playing the &#8220;master&#8221; track.<\/p>\n<p>In this demo, we show how we\u00a0create the small Motion Corp videos. \u00a0We do not use standard linear video editing software (we find it less flexible), but stay in the pure HTML5 world. \u00a0This allows us to stay away from &#8220;flattening&#8221; &#8211; the process of merging &#8220;layers&#8221; of data into a single stream, and keep all data elements open for the entire process. \u00a0The final, YouTube films are simple screen captures of a separate browser window (we control it from a different browser, possibly on a different machine too)<\/p>\n<p><iframe loading=\"lazy\" title=\"Behind the Scenes\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/oK6gbU4w7_Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>In case some of you are interested in experiencing such a tool first hand, we&#8217;ve made it available online &#8211; note however that the Shared Motion powering it is shared between everyone in the world &#8211; so if more than one person is active, they will share the experience! \u00a0We did this to avoid logins or any other kind of difficulty for people to play with it &#8211; if it becomes a problem let us know and we&#8217;ll make it\u00a0private.<\/p>\n<ul>\n<li>Timeline\/controls: <a href=\"http:\/\/mcorp.no\/examples\/film\/\" target=\"_blank\" rel=\"nofollow\">http:\/\/mcorp.no\/examples\/film\/<\/a><\/li>\n<li>Rendered output: <a href=\"http:\/\/mcorp.no\/examples\/film\/vid.html\" target=\"_blank\" rel=\"nofollow\">http:\/\/mcorp.no\/examples\/film\/vid.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hi all, time for a new demonstration! As we are working on the HTML5 Timing Object, it is nice to visualize how it can be used. \u00a0In this demonstration, we show how we map data onto a timeline. This is &hellip; <a href=\"https:\/\/www.w3.org\/community\/webtiming\/2015\/04\/08\/timed-data-and-multi-device-playback\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":7428,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[3],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-demo"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/users\/7428"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":5,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/posts\/45\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/webtiming\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}