philn/fosdem2010-talk.html

## fosdem2010-talk.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
li {
  margin: 15px;
}
.currentslide {
  position: absolute;
  left: 50px;
  top: -10px;
}
body
{
background-image:url('logo.gif');
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
</style>
<script type="text/javascript">

function RunTransition(className, cid, nid) {
  var trans = new className();
  trans.run.call(trans, cid, nid);
}

function Transition() { }
Transition.prototype = {
  "duration" : 1,
  "cslide" : null,
  "nslide" : null,
  "transition" : function(toggle) {
       this.cslide.style.WebkitTransition = this.nslide.style.WebkitTransition =
               (toggle
                    ? 'all ' + this.duration + 's ease-in-out' : 'all 0s none');
       },
  "prepare" : function() { },
  "perform" : function() { },
  "cleanup" : function() { },
  "run" : function(cid, nid) {
       this.cslide = document.getElementById(cid);
       this.nslide = document.getElementById(nid);
       this.cslide.style.display = this.nslide.style.display = 'block';
       this.cslide.style.visibility = this.nslide.style.visibility = 'visible';
       this.nslide.setAttribute('class', 'currentslide');

       this.transition(false);
       this.prepare();
       var dis = this;
       setTimeout(function() {
             dis.transition(true);
             setTimeout(function() { dis.perform.apply(dis); }, 0);
       }, 0);
       setTimeout(function() {
             dis.transition(false);
             dis.cslide.style.visibility = 'hidden';
             dis.cslide.style.display = 'none';
             dis.cslide.setAttribute('class', '');
             setTimeout(function() { dis.cleanup.apply(dis); }, 0);
       }, dis.duration * 1000);
  }
}

function Rotate() { }
Rotate.prototype = new Transition;
Rotate.prototype.prepare = function() {
  this.cslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
  this.nslide.style.WebkitTransform = 'matrix(0,1.99,0,0,0,0) scale(.5)';
}
Rotate.prototype.perform = function() {
  this.cslide.style.WebkitTransform = 'matrix(0,-1.99,0,0,0,0) scale(.5)';
  var dis = this; setTimeout(function() {
    dis.nslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
  }, this.duration * 1000);
}
Rotate.prototype.cleanup = function() {
  var dis = this;
  setTimeout(function() {
    dis.cslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
  }, this.duration * 1000);
}

function Wipe() { }
Wipe.prototype = new Transition;
Wipe.prototype.prepare = function() {
  this.cslide.style.WebkitTransform = 'translate(0)';
  this.nslide.style.WebkitTransform = 'translate(100%)';
}
Wipe.prototype.perform = function() {
  this.cslide.style.WebkitTransform = 'translate(-100%)';
  this.nslide.style.WebkitTransform = 'translate(0)';
}
Wipe.prototype.cleanup = function() {
  this.cslide.style.WebkitTransform = 'translate(0)';
}

function Fade() { }
Fade.prototype = new Transition;
Fade.prototype.prepare = function() {
  this.cslide.style.opacity = '1';
  this.nslide.style.opacity = '0';
}
Fade.prototype.perform = function() {
  this.cslide.style.opacity = '0';
  this.nslide.style.opacity = '1';
}
Fade.prototype.cleanup = function() {
  this.cslide.style.opacity = '1';
}

var current_slide = 0;

function previous_slide() {
  if (current_slide < 1) {
    current_slide = 1;
    return;
  }

  RunTransition(Fade, current_slide, current_slide-1);
  current_slide = current_slide - 1;
}

function next_slide() {
  RunTransition(Wipe, current_slide, current_slide+1);
  current_slide = current_slide + 1;
}

function on_key_down() {
  if (event.keyCode == 37) {
    previous_slide();
  } else if (event.keyCode == 39 || event.keyCode == 32) {
    next_slide();
  }
}
</script>
</head>

<body  onkeyDown="on_key_down()">

<div class="slide" id="0" onclick="next_slide()">
  <h1>Multimedia in WebKitGTK+</h1>

</div>

<div class="slide" id="1" style="display: none" onclick="next_slide()">
  <h1>What is WebKitGTK+?</h1>

  <ul>
    <li>Fork of KHTML started by Apple, now with contributors all over the place.</li>
    <li>Shared base, with ports being built from the same tree, with different build systems.</li>
    <li>Rendering backend built with cairo.</li>
    <li>Resource loading backend built with libsoup.</li>
    <li>A regular GtkWidget which you can add to your GtkScrolledWindow.</li>
  </ul>
</div>

<div class="slide" id="2" style="display: none" onclick="next_slide()">
  <h1>Technologies</h1>

  <ul>
      <li>Cairo for rendering</li>
      <li>Pango for fonts</li>
      <li>GTK+ for theming/widgets</li>
      <li>Soup for networking</li>
      <li>Keyring for auth storage</li>
      <li>GStreamer for HTML5 audio/video elements</li>
  </ul>
</div>

<div class="slide" id="3" style="display: none" onclick="next_slide()">
  <h1>Multimedia in WebKitGTK+</h1>

  <ul>
    <li>3 layers from top to bottom:
      <ul>DOM: HTMLMediaElement</ul>
      <ul>graphics: cross-platform MediaPlayer bridge</ul>
      <ul>platform-specific MediaPlayerPrivate backend</ul>
    </li>
  </ul>
</div>

<div class="slide" id="4" style="display: none" onclick="next_slide()">
  <h1>Until September 2009 (past :))</h1>
  <ul>
    <li>XX% Skipped media tests (flaky or missing features).</li>
    <li>Not really useful without controls UI.</li>
  </ul>
</div>

<div class="slide" id="5" style="display: none">
  <h1>Since September 2009 (present!)</h1>
  <ul>
    <li>only XX% Skipped media tests!</li>
    <li>Features (<a href="demo.html">demo</a>):
      <ul>Simple controls UI</ul>
      <ul>Trick modes (reverse playback, ffwd playback)</ul>
      <ul>QuickTime ref movies: redirections</ul>
      <ul>Better integration with PulseAudio</ul>
      <ul>data: uris support (upstreamed to gst-plugins-bad)</ul>
      <ul>On-disk buffering</ul>
    </li>
  </ul>
</div>

<div class="slide" id="6" style="display: none" onclick="next_slide()">
  <h1>Work in progress (future!)</h1>
  <ul>
    <li>More media tests fixing</li>
    <li>WebKit src element (patch by Sebastian Dröge)</li>
    <li>Fullscreen video display</li>
    <li>Enhanced controls</li>
    <li>Closed captions</li>
  </ul>
</div>

<div class="slide" id="7" style="display: none" onclick="next_slide()">
  <h1>Contact</h1>

  <ul>
    <li>#webkit and #webkit-gtk on irc.freenode.org</li>
    <li>webkit-gtk and webkit-dev mailing lists at lists.webkit.org</li>
    <li>http://www.webkit.org/</li>
    <li>http://www.webkitgtk.org/</li>
    <li>http://trac.webkit.org/wiki/HackingGtk</li>
  </ul>
</div>

<div class="slide" id="8" style="display: none" onclick="next_slide()">
  <h1>Questions?</h1>

</div>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style type="text/css">
	li {
	margin: 15px;
	}
	.currentslide {
	position: absolute;
	left: 50px;
	top: -10px;
	}
	body
	{
	background-image:url('logo.gif');
	background-repeat:no-repeat;
	background-position:bottom right;
	background-attachment:fixed;
	}
	</style>
	<script type="text/javascript">

	function RunTransition(className, cid, nid) {
	var trans = new className();
	trans.run.call(trans, cid, nid);
	}

	function Transition() { }
	Transition.prototype = {
	"duration" : 1,
	"cslide" : null,
	"nslide" : null,
	"transition" : function(toggle) {
	this.cslide.style.WebkitTransition = this.nslide.style.WebkitTransition =
	(toggle
	? 'all ' + this.duration + 's ease-in-out' : 'all 0s none');
	},
	"prepare" : function() { },
	"perform" : function() { },
	"cleanup" : function() { },
	"run" : function(cid, nid) {
	this.cslide = document.getElementById(cid);
	this.nslide = document.getElementById(nid);
	this.cslide.style.display = this.nslide.style.display = 'block';
	this.cslide.style.visibility = this.nslide.style.visibility = 'visible';
	this.nslide.setAttribute('class', 'currentslide');

	this.transition(false);
	this.prepare();
	var dis = this;
	setTimeout(function() {
	dis.transition(true);
	setTimeout(function() { dis.perform.apply(dis); }, 0);
	}, 0);
	setTimeout(function() {
	dis.transition(false);
	dis.cslide.style.visibility = 'hidden';
	dis.cslide.style.display = 'none';
	dis.cslide.setAttribute('class', '');
	setTimeout(function() { dis.cleanup.apply(dis); }, 0);
	}, dis.duration * 1000);
	}
	}

	function Rotate() { }
	Rotate.prototype = new Transition;
	Rotate.prototype.prepare = function() {
	this.cslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
	this.nslide.style.WebkitTransform = 'matrix(0,1.99,0,0,0,0) scale(.5)';
	}
	Rotate.prototype.perform = function() {
	this.cslide.style.WebkitTransform = 'matrix(0,-1.99,0,0,0,0) scale(.5)';
	var dis = this; setTimeout(function() {
	dis.nslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
	}, this.duration * 1000);
	}
	Rotate.prototype.cleanup = function() {
	var dis = this;
	setTimeout(function() {
	dis.cslide.style.WebkitTransform = 'matrix(1,0,0,1,0,0)';
	}, this.duration * 1000);
	}

	function Wipe() { }
	Wipe.prototype = new Transition;
	Wipe.prototype.prepare = function() {
	this.cslide.style.WebkitTransform = 'translate(0)';
	this.nslide.style.WebkitTransform = 'translate(100%)';
	}
	Wipe.prototype.perform = function() {
	this.cslide.style.WebkitTransform = 'translate(-100%)';
	this.nslide.style.WebkitTransform = 'translate(0)';
	}
	Wipe.prototype.cleanup = function() {
	this.cslide.style.WebkitTransform = 'translate(0)';
	}

	function Fade() { }
	Fade.prototype = new Transition;
	Fade.prototype.prepare = function() {
	this.cslide.style.opacity = '1';
	this.nslide.style.opacity = '0';
	}
	Fade.prototype.perform = function() {
	this.cslide.style.opacity = '0';
	this.nslide.style.opacity = '1';
	}
	Fade.prototype.cleanup = function() {
	this.cslide.style.opacity = '1';
	}

	var current_slide = 0;

	function previous_slide() {
	if (current_slide < 1) {
	current_slide = 1;
	return;
	}

	RunTransition(Fade, current_slide, current_slide-1);
	current_slide = current_slide - 1;
	}

	function next_slide() {
	RunTransition(Wipe, current_slide, current_slide+1);
	current_slide = current_slide + 1;
	}

	function on_key_down() {
	if (event.keyCode == 37) {
	previous_slide();
	} else if (event.keyCode == 39 \|\| event.keyCode == 32) {
	next_slide();
	}
	}
	</script>
	</head>

	<body onkeyDown="on_key_down()">

	<div class="slide" id="0" onclick="next_slide()">
	<h1>Multimedia in WebKitGTK+</h1>

	</div>

	<div class="slide" id="1" style="display: none" onclick="next_slide()">
	<h1>What is WebKitGTK+?</h1>

	<ul>
	<li>Fork of KHTML started by Apple, now with contributors all over the place.</li>
	<li>Shared base, with ports being built from the same tree, with different build systems.</li>
	<li>Rendering backend built with cairo.</li>
	<li>Resource loading backend built with libsoup.</li>
	<li>A regular GtkWidget which you can add to your GtkScrolledWindow.</li>
	</ul>
	</div>

	<div class="slide" id="2" style="display: none" onclick="next_slide()">
	<h1>Technologies</h1>

	<ul>
	<li>Cairo for rendering</li>
	<li>Pango for fonts</li>
	<li>GTK+ for theming/widgets</li>
	<li>Soup for networking</li>
	<li>Keyring for auth storage</li>
	<li>GStreamer for HTML5 audio/video elements</li>
	</ul>
	</div>

	<div class="slide" id="3" style="display: none" onclick="next_slide()">
	<h1>Multimedia in WebKitGTK+</h1>

	<ul>
	<li>3 layers from top to bottom:
	<ul>DOM: HTMLMediaElement</ul>
	<ul>graphics: cross-platform MediaPlayer bridge</ul>
	<ul>platform-specific MediaPlayerPrivate backend</ul>
	</li>
	</ul>
	</div>

	<div class="slide" id="4" style="display: none" onclick="next_slide()">
	<h1>Until September 2009 (past :))</h1>
	<ul>
	<li>XX% Skipped media tests (flaky or missing features).</li>
	<li>Not really useful without controls UI.</li>
	</ul>
	</div>

	<div class="slide" id="5" style="display: none">
	<h1>Since September 2009 (present!)</h1>
	<ul>
	<li>only XX% Skipped media tests!</li>
	<li>Features (<a href="demo.html">demo</a>):
	<ul>Simple controls UI</ul>
	<ul>Trick modes (reverse playback, ffwd playback)</ul>
	<ul>QuickTime ref movies: redirections</ul>
	<ul>Better integration with PulseAudio</ul>
	<ul>data: uris support (upstreamed to gst-plugins-bad)</ul>
	<ul>On-disk buffering</ul>
	</li>
	</ul>
	</div>

	<div class="slide" id="6" style="display: none" onclick="next_slide()">
	<h1>Work in progress (future!)</h1>
	<ul>
	<li>More media tests fixing</li>
	<li>WebKit src element (patch by Sebastian Dröge)</li>
	<li>Fullscreen video display</li>
	<li>Enhanced controls</li>
	<li>Closed captions</li>
	</ul>
	</div>

	<div class="slide" id="7" style="display: none" onclick="next_slide()">
	<h1>Contact</h1>

	<ul>
	<li>#webkit and #webkit-gtk on irc.freenode.org</li>
	<li>webkit-gtk and webkit-dev mailing lists at lists.webkit.org</li>
	<li>http://www.webkit.org/</li>
	<li>http://www.webkitgtk.org/</li>
	<li>http://trac.webkit.org/wiki/HackingGtk</li>
	</ul>
	</div>

	<div class="slide" id="8" style="display: none" onclick="next_slide()">
	<h1>Questions?</h1>

	</div>

	</body>
	</html>