index.html 20.3 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video on the Web</title>
<meta name="copyright" content="Copyright &#169; 2008 W3C (MIT, ERCIM, Keio)" />
  <link rel="transformation"
  href="http://www.w3.org/2002/12/cal/glean-hcal.xsl" />
  <link rel="stylesheet" href="../../../Talks/Tools/Slidy/slidy.css"
  type="text/css" media="screen, projection, print" />
  <link rel="stylesheet" href="../../../Talks/Tools/Slidy/w3c-blue.css"
  type="text/css" media="screen, projection, print" />
  <script type="text/javascript" src="slidy.js">
 </script>
  <script type="text/javascript">

function playVideo() {
 vid.play();
 play.style.color='black';
 pause.style.color='#999';
 stopi.style.color='#999';
}
function pauseVideo() {
 vid.pause();
 play.style.color='#999';
 pause.style.color='black';
 stopi.style.color='#999';
}
function stopVideo() {
 vid.stop();
 play.style.color='#999';
 pause.style.color='#999';
 stopi.style.color='black';
}

 </script>

  <style type="text/css">
table {
 border-collapse: collapse;
 margin: auto;
}
th { background: #ccc; }
td {
  font-family: monospace;
  text-align: right;
}
td, th {
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 1ex;
}
tbody th {
  text-align: left;
}
thead td, thead th,
tr.total td, tr.total th,
tbody {
  border: 1px solid black;
}
th.empty {
  background: inherit;
  border-top: none;
  border-left: none;
}
tr.total td {
  font-weight: bold;
  background: #eee;
}
div.slide img {
 border: 3px solid #ccc;
 padding: 2px;
}
div.cover img {
 border: none;
}
div.image p.title {
  text-align: center;
  font-weight: bold;
  font-size: large;
}
div.image p.img {
  margin: 1em auto;
}
div.image span.source, blockquote p.source {
  font-size: x-small;
  font-style: italic;
}
div.note {
 display: none;
}
div.snote {
 margin-left: 1em;
 margin-right: 1em;
 background-color: #ccc;
}
blockquote p.source {
  text-align: right;
}
video {
  padding: 2px;
  background-image: url(../21-ac-arch/html5.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 3px outset blue;
}
 </style>
</head>
 <body>
<div class="background">
<img id="head-icon" alt="graphic with four colored squares"
src="../../../Talks/Tools/Slidy/icon-blue.png" /> <object
id="head-logo" title="W3C logo" type="image/svg+xml"
data="../../../Talks/Tools/Slidy/w3c-logo-blue.svg">
  <img src="../../../Talks/Tools/Slidy/w3c-logo-blue.gif"
  alt="W3C logo" id="head-logo-fallback" /></object> </div>

<div class="background slanty">
<img src="../../../Talks/Tools/Slidy/w3c-logo-slanted.jpg"
alt="slanted W3C logo" /> </div>

<div class="slide cover">
<img align="right" src="../../../Talks/Tools/Slidy/keys.jpg"
alt="Cover page images (keys)" class="cover" />

<h1>Video on the Web</h1>

<p><em><strong><a href="http://www.org/People/LeHegaret">Philippe
Le H&eacute;garet</a></strong></em></p>

<p><em><strong>W3C Interaction Domain Leader</strong>,<br />
<strong>Video in the Web Activity Lead</strong></em></p>
<p>Video on the Web 2008<br />&nbsp; (IPTV가 웹을 만났을 때 !)<br />
2008년 9월 25일~26일, 서울, 대한민국</p>

<p><em>Note:</em> these slides contain demos of the HTML 5 and SVG 1.2
video elements, and where developed with a <a
href='http://labs.opera.com/news/2008/07/18/'>preview build of Opera
9.52</a> to fully demonstrate future capabilities of Web browsers.</p>

</div>

<div class="slide">
<h1>W3C Mission</h1>

<div style='text-align: center; clear: both'>
<div id="logo"><img style='border: none' width="315" height="48" alt="The World Wide Web Consortium (W3C)"
    src="../../../Icons/w3c_main.png"/></div>

<h2 style="color: rgb(77,140, 186); font-style:italic;">“Leading the Web to its full potential.”
</h2>
</div>

<p style='width: 60%; margin: auto'>
W3C is a collaborative community where experts develop the standards
that make the Web work, and that make the Web accessible and useful to
people around the world.
</p>
</div>

<div class="slide">
<h1>International Presence</h1>

<div class='image'>
<p class='img' style='width:630px'>
  <img src="World.png" width='630'
title='World'
alt='World' /></p></div>
<p style='text-align: center'>
W3C has 425 members in 40 countries,
offices in 20 countries, and 3 host sites.
</p>

</div>

<div>
<h1>Video in the Web</h1>

</div>

<div class="slide">
<h1>What's on the Internet tonight?</h1>


<blockquote cite='http://www.gizmag.com/go/7862/'>
  <q>The Internet is becoming consumers' primary entertainment source [&hellip;]</q>
  <p class='source'>
    &mdash; Saul Berman, IBM Media &amp; Entertainment Strategy and Change
  </p>
</blockquote>

<div class='image'>
<p class='img' style='width: 320px;'>
  <img src="../../../2007/10/marge.jpg" width='320px'
title='Marjorie "Marge" Simpson using the Web (&copy; Fox Broadcasting Company)'
alt='Marjorie "Marge" Simpson using the Web (&copy; Fox Broadcasting Company)' /><br />
<span class='source'>&copy; Fox Broadcasting Company</span></p>
</div>

<div class='handout'>
<ul>
  <li>There is a decline of TV as Primary Media Device.</li>
  <li>Nearly 75% of US Internet users watched online video</li>
  <li>Video producers are looking at ways to increase their reach.</li>
  <li>Broadcast TV advertisement is a $60B market, Internet (not
  counting search) is $10B. $4.3B spend in online video advertising
  over the next 4 years. Online video ad revenues are growing 55.5% per year.</li>

</ul>
</div>
</div>

<div class="slide">
<h1>Video Forecast</h1>

<div class='image'>
<p class='title'>Cisco's Global Consumer Internet Traffic Forecast</p>
<p class='img' style='width: 680px; margin: 1em auto;'>
<img src='cisco-graph.svg' width="680" height='322'
title="Cisco's Global Consumer Internet Traffic Forecast"
   alt="Cisco's Global Consumer Internet Traffic Forecast"/><br />
<span class='source'>Source: Cisco, 2007</span></p>
</div>

<div class='handout'>
  <ul>
    <li>Video is driving IP traffic growth</li>
    <li>thus consumer bandwidth will increase (but never enough)</li>
    <li>Increase in volume of video content</li>
    <li>In 2011, nearly 30% is Internet Video, additional 30% due to Video P2P</li>
  </ul>
</div>
</div>

<!--
<div class="slide">
<h1>Increase in Video Online Content</h1>

<div class='image'>
<p class='title'>User Generated Video Uploads per day</p>
<p class='img' style='width: 389px;'>
<img src='../../01/idc-ugv.png' width='389'
title="User-Generated Video Uploads per Day"
   alt="User-Generated Video Uploads per Day"/><br />
<span class='source'>Source: IDC, 2007</span></p>
</div>
<div class='handout'>
<p>So, what does all this tell us?</p>
<ul>
  <li>YouTube was Just the Beginning: launched in 2005, take 4% of the
  US Internet Traffic by the end of 2006.</li>

  <li>While TV brought us information and entertainment, online video
  adds the social aspect dimension, it's a means of expression.
  YouTube and MySpace are good examples. The value is the combination
  of communications and content.</li>
  <li>Multiple and fragmentation of multiple video platforms</li>
  <li>Drive towards higher quality, ideally HD. Camcorders and HDTV are getting deployed.</li>
  <li>User Generated Content helps drives the number</li>
</ul>
</div>
</div>
-->
<!--
<div class="slide">
<h1>The Long Tail&hellip; of Video</h1>

<blockquote cite='http://www.wired.com/wired/archive/12.10/tail.html?pg=2&amp;topic=tail&amp;topic_set='>
<q>
 The future of entertainment is in the millions of niche markets at
 the shallow end of the bitstream.
</q>
  <p class='source'>
    &mdash; Chris Anderson, Wired magazine
  </p>
</blockquote>
<div style='text-align: center'>
<img src='../../../2007/10/Long_tail.png' alt='The Long Tail' title='The Long Tail'/>
</div>

<div class='handout'>
  <ul>
    <li>The number of viewers is inversely proportional to its popularity rank</li>
    <li>With online and mobile video, million of titles are viewed by a relatively small audience</li>
    <li>Notion is that the total amount of viewing of less popular content is large than the total amount of viewing of popular content.</li>
    <li>But, it needs to be available, for a small price, and you need to help consumers find it. (see Amazon, Netflix, Rhapsody)</li>
  </ul>
</div>
</div>

<div class="slide">
<h1>Video at W3C</h1>
<p>We do video related work in several areas, each more or less affecting different video issues</p>

<ul style='font-size: small'>
  <li>Synchronized Multimedia Activity: Timed Text (closed captioning), SMIL (video element/API, closed captioning)</li>
  <li>HyperText Activity: HTML 5 (video element/API)</li>
  <li>Graphics Activity: SVG (video element/API)</li>
  <li>Semantic Web Activity: SWD, SWEO</li>
  <li>Architecture Activity: EXI (container formats)</li>
  <li>WAI Activity: Protocols and Formats (closed captioning), Guidelines</li>
  <li>Mobile Web Initiative (device independence)</li>
  <li>Rich Web Applications</li>
  <li>Privacy Languages Interest Group</li>
  <li>Multimedia Semantics XG (closed)</li>
</ul>
<div class='handout'>
  <p>Lots of activities can potentially impact video</p>
</div>
</div>

-->


<div class="slide">
<h1>W3C Workshop</h1>
<div style='color: white; background-color: rgb(0, 90, 156); margin: 1em;'>
<img src='http://www.w3.org/2007/08/video/banner.jpg' alt='Cinematographie'
 style='float: right; padding-top: 5px;padding-right: 5px;border:none'/>
<h3 style='padding-top: 1em;'>W3C Video on the Web Workshop</h3>
<p>12-13 December 2007, San Jose, California and Brussels, Belgium</p>
<p style='margin-bottom: .5ex;padding-bottom:1em'>Hosted by Cisco Systems</p>
</div>
<div class='image'>
<p class='img' style='width: 500px'><img src='../../01/chris_takes_a_picture.jpg'
   alt='W3C Video Workshop Telepresence' title='W3C Video Workshop Telepresence'/><br />
<span class='source'>Photo credit: <a href="http://www.flickr.com/photos/49504282@N00/">Chris Lilley</a></span></p>
</div>

<div class='handout'>
  <ul>
    <li>Make video a first-class object on the Web</li>
  </ul>
</div>
</div>

<div class="slide">
<h1>W3C Workshop Participants</h1>

<p style='font-weight: bold; font-size: 75%'>Accenture, Adobe Systems, Annodex
Association, Apple, CBS Interactive, CableLabs, Canon, Capgemini, CWI,
Cisco Systems, Dailymotion, Hitachi, Hot Potato, IBBT, IJS, MTV
Networks, Meraka Institute, Motorola, Move Networks, Mozilla
Foundation, Nemours Foundation, Nokia Corporation, RealNetworks,
Samsung Electronics, Sony, Sun Microsystems, Thomson, Turner
Broadcasting System, University Of California at Santa Cruz,
University of Wollongong, VRT medialab, Via Licensing, Walt Disney
Internet Group, Web3D Consortium, Wright State University, YouTube,
thePlatform
</p>

<div class='image'>
<p class='img' style='width: 500px'><img src='../../01/steve_bratt.jpg' width='500'
title='Steve Bratt makes a point in Black and White'   alt='Steve Bratt makes a point in Black and White'/><br />
<span class='source'>Photo credit: <a href="http://www.flickr.com/photos/rwfreund/">Robert Freund</a></span></p>
</div>
</div>

<div class="slide">
<h1>Workshop Laundry list</h1>

<ul style='font-family: Handscript SF, serif'>
<li><strong><code>&lt;video></code> <span style='font-family: sans-serif'>HTML</span> 5.0</strong></li>
<li><strong>Codecs and formats</strong></li>
<li><strong>Metadata</strong></li>
<li><strong>Content protection</strong></li>
<li><strong>Media fragment</strong></li>
<li>Accessibility</li>
<li>Tagging</li>
<li>Searchability</li>
<li>Synchronization, Temporal properties for styling</li>
<li>Distribution: cost, QoS, tracking, mobile, etc.</li>
<li>Playlist files</li>
<li>&hellip;</li>
</ul>

<div class='handout'>
  <ul>
    <li>Accessibility is still an issue</li>
  </ul>
</div>
</div>

<div class="slide">
<h1>HTML 5.0 &lt;video&gt;</h1>

<div style='position: relative'>

<pre style='width: 75%'>
&lt;video src='myMovie' id='vid' />

var vid = document.getElementById("vid");
<span id='play' onclick="playVideo();" style='cursor: pointer; color: #999;'>vid.play();</span>
<span id='pause' onclick="pauseVideo();" style='cursor: pointer; color: #999;'>vid.pause();</span>
<span id='stopi' onclick="stopVideo();" style='cursor: pointer; color: black;'>vid.stop();</span>
vid.muted = true;

vid.addCueRange("ranges", 10, 20, false,
                enterCallBack, exitCallBack);
</pre>

<p style='text-align: left; position: absolute; width: 320px; height:240px; right: 10%; top: 5%; z-index: 2'>
This is a paragraph in HTML on top of the video.
</p>
<p style='text-align: left; position: absolute; width: 320px; height:240px; right: 10%; top: 40%; z-index: 0'>
CSS opacity allows this video to be partially transparent.
</p>
<video style='opacity: 0.5; position: absolute; width: 320px; height:240px; right: 5%; top: 5%; z-index: 1'
  src='small.ogg' width='360' height='240' id="vid">
    <p>This video cannot be displayed.
    <br /> No support for HTML 5?</p>
</video>
</div>

<p style='font-size: x-small'>Click on the text, e.g. <code>vid.play()</code>, to
play/pause/stop the video.</p>
</div>

<div class="slide">
<h1>SVG 1.2 &lt;video&gt;</h1>

<div style='position: relative'>

<div style='width: 75%'>
<p>
Or how to make HTML, SVG, CSS, JS, and Video fit together?
</p>
<pre>
&lt;svg:g>
  &lt;svg:g id='vid' clip-path="url(#etri)">
    &lt;svg:video  xlink:href="myMovie" id='vid' />
  &lt;/svg:g>
  &lt;svg:use xlink:href="#vid"
              transform="scale(1 -1)"
              mask="url(#fade)"/>
&lt;/svg:g>

var vid = document.getElementById("vid");
<span id='playS' onclick="imgV.src = 'etri.svg'; playS.style.color = 'black'; return true;" style='cursor: pointer; color: #999;'>vid.beginElement();</span>
</pre>
</div>

<p style='text-align: left; position: absolute; width: 320px; height:240px; right: 10%; top: 5%; z-index: 2'>
This is a paragraph in HTML on top of the video.
</p>
<p style='text-align: left; position: absolute; width: 320px; height:240px; right: 10%; top: 35%; z-index: 0'>
CSS opacity allows this video to be partially transparent.
</p>
<img style='opacity: 0.8; position: absolute; width: 360px; height:350px; right: 5%; top: 5%;'
  src='null.svg' width='640' height='240' id="imgV" alt=''/>

</div>
<p style='font-size: x-small'>Click on the text <code>vid.beginElement()</code> to
begin the video.</p>
</div>

<div class="slide">
<h1>Codecs and formats</h1>

<p style='font-size: x-small; text-align: center'><img src='video-container.svg'
title="Video Container format" style='border: none; ' width='640' height='480'
   alt="Video Container format"/></p>

</div>

<div class="slide">
<h1>HTML 5 Requirements for a Video codec</h1>
<blockquote>
<ul>
<li>Known not to require per-unit or per-distributor licensing</li>
<li>Compatible with the open source development model</li>
<li>Of sufficient quality as to be usable</li>
<li>Not an additional submarine patent risk for large companies</li>
</ul>
</blockquote>

<p>None of the codecs fit the requirements for HTML 5&hellip;</p>

</div>

<div class="slide">
<h1>Video in the Web Activity</h1>
<p><a href='http://www.w3.org/2008/WebVideo'>http://www.w3.org/2008/WebVideo</a></p>
<ul>
  <li><a href='http://www.w3.org/2008/01/timed-text-wg'>Timed Text
  Working Group</a> (captioning, video description)</li>

  <li><a href='http://www.w3.org/2008/01/media-fragments-wg'>Media
Fragments Working Group</a> (video, audio, and images)</li>

  <li><a href='http://www.w3.org/2008/01/media-annotations-wg'>Media
Annotation Working Group</a>: Develop a <strong>simple</strong> <em>lingua franca</em>
ontology and map it to existing formats</li>

  <li><a href='http://www.w3.org/2008/01/media-guidelines-wg'>Best
Practices and Guidelines for Media Content on the Web (see next
slide)</a></li>

</ul>

</div>


<div class="slide">
   <h1>Media Fragments: Spatial and Temporal</h1>

<p style='float: right; width: 40%;'>
Will provide URI-based mechanisms for uniquely identifying temporal and spatial fragments for media objects on the Web, such as video, audio, and images.
</p>
<div class='image' style='clear: left;' >
<p class='img' style='width: 500px; margin: 1%; clear:left;'><img src='../../01/beth.jpg'
title='Beth, the audience, Belgium, her pitch, and herself' alt='Beth, the audience, Belgium, her pitch, and herself'/><br />
<span class='source'>Photo credit: <a href="http://www.flickr.com/photos/rwfreund/">Robert Freund</a></span></p>
</div>
<p style='margin: 1em auto; text-align: center'><img src='../../01/timbl_movie.png' alt='Temporal addressing' title='Temporal addressing'/></p>

</div>

<div class="slide">
<h1>Media Fragments Working Group</h1>

 <p>Chairs: Erik Mannens (IBBT), Raphaël Troncy (CWI)</p>
  <p>Address a region of a media object and the impact at the
  application level (allow full or partial media retrieval using the HTTP protocol).</p>

  <pre>

http://dig.csail.mit.edu/2007/09/OneWebDay#t=24m16s-30m12s

http://www.example.org/imedia.mov#rect(50,50,200,100)

</pre>

</div>

<div class="slide">
   <h1>Metadata</h1>

<ul>
<li>Many standards: MPEG 7, SMIL, iTunes XML, Yahoo! MediaRSS, CableLabs VOD Metadata Content, Video sitemaps, etc.</li>
<li>Different sources: Content Creator, Publisher, Professional Content, Users.</li>
<li>Survivability: allowing the metadata to survive along the delivery chain (transcoding, republication, syndication, etc.).</li>
<li>Ability to add metadata without touching the data</li>
</ul>
<p>Goals:</p>
<ul>
<li>Search</li>
<li>Discover</li>
</ul>
<p>Related: Metadata Working Group (Canon, Sony, Apple, Microsoft, Adobe)</p>
</div>

<div class="slide">
<h1>Content protection</h1>

<ul>
<li>Pushed by the content owners: monetizing commercial content</li>
<li>Enforce usage rights</li>
<li>Monitor content usage</li>
<li>DRM, watermarking, fingerprinting</li>
</ul>

</div>


<div class="slide">
<h1>Media Annotations Working Group: Core Ontology</h1>

      <p>Chair: Soohong Daniel Park (Samsung)</p>
   <p><strong>simple lingua-franca</strong> ontology</p>

   <p class='text-align: center'><img src='meta.jpg' alt='meta' title='meta'/></p>

</div>


<div class="slide">
   <h1>Media Annotations Working Group: Metadata API</h1>
      <p>Client side read-only media annotations API</p>

<pre>
var vid = document.getElementById("vid");
vid.getTitle();
vid.getAuthor();
vid.getRights();
vid.getLicense();
vid.getCreationDate();
</pre>

<p>See <a href='http://www.w3.org/2008/03/metadata_demo'>demo</a></p>

</div>

<div class='slide'>
  <h1>Guidelines for Media Content on the Web (proposal)</h1>

  <ul>
    <li>Scope is deployment, use, and manipulation of media content.</li>
    <li>Targeted towards user agents, authoring tools, protocols, and formats.</li>
  </ul>

  <p>Potential items on the list:</p>
  <ul>
    <li>Transport protocol guidelines, e.g. bandwidth, use of the HTTP protocol.</li>
    <li>content-adaptation guidelines, e.g. video resolution</li>
    <li>Dealing with media annotations</li>
    <li>User experience guidelines, e.g. localization, captioning, video description, user interface</li>
    <li>Video API guidelines</li>
    <li>Linking from Video content</li>
  </ul>
</div>

<div class='slide'>
  <h1>So, What's in the Web for IPTV?</h1>

<p>Web technologies are getting deployed on mobiles and televisions.</p>
<ul>
<li>Integration Computer/HD Television (e.g. agenda)</li>
<li>Rich Web Applications: HTML/SVG, CSS, JS</li>
<li>Widgets</li>
<li>Bookmarking</li>
<li>Leveraging the Web and its social networks (imdb, wikipedia, etc.)</li>
</ul>

</div>

<div class="slide">
<h1>Thank you</h1>


<img src='http://www.w3.org/2007/08/video/banner.jpg' alt='Cinematographie'
 style='float: right; margin: 3em; -moz-border-radius: 2px;'/>
<h2 style='color: rgb(0, 90, 156); font-weight: bold;padding-top: 1em;'>Video on the Web is not just what you see</h2>
<h3 style='color: rgb(0, 90, 156); padding: 1em; font-weight: bold; font-style: italic'>&mdash; it's
what you can search, discover, create, distribute and manage.</h3>
<h3 style='color: rgb(0, 90, 156); padding: 1em; font-weight: bold; font-style: italic'>http://www.w3.org/2008/WebVideo</h3>

<div style='text-align: center; clear: both'>
<div id="logo"><img style='border: none' width="315" height="48" alt="The World Wide Web Consortium (W3C)"
    src="../../../Icons/w3c_main.png"/></div>

<h2 style="color: rgb(77,140, 186); font-style:italic; font-family: Times, 'Times New Roman'"
lang="ko" xml:lang="EUC-KR">웹의 모든 잠재력을 이끌어 내기 위하여…</h2>

<p style='text-align: center; clear: both'>
Slides at http://www.w3.org/2008/Talks/26-video-plh/
</p>
</div>
</div>

</body>
</html>