Ajaxus place on the net

Apple’s site can tell you a lot about the new end-user features of Safari 3. But a lot of the goodness is on the inside, in the WebKit engine that powers Safari. Here’s a list of ten of the most exciting engine enhancements since the Safari 2 version of WebKit, with lots of details and demos. These features are all included in the WebKit that comes with Safari 3 - you don’t have to download nightlies or anything else to get them.

1. Enhanced Rich Text Editing
2. Faster JavaScript and DOM
3. Faster Page Loading
4. SVG
5. XPath
6. New and Improved XML Technologies
7. Styleable Form Controls
8. Advanced CSS Styling
9. Reduced Memory Use
10. Web Developer Tools
One of the best WebKit improvements is the availability of Web Developer tools, the Web Inspector and the Drosera JavaScript debugger. I can’t really describe these better than the original blog posts, so here’s some screenshots and links to the original posts:

read source

Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5

<video src=sample.mov autoplay></video>

To make a button that gives the user basic playback controls you could do this:

<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
</script>

<input type=button onclick="playPause()" value="Play/Pause">

The specification also defines a set of events that can be used to react to changes in media playback and load state. For example:

myVideo.addEventListener('ended', function () {
  alert('video playback finished')
} );

To play audio from JavaScript you can simply do this:

var audio = new Audio("song.mp3");
audio.play();

The implementation is still a work in progress and not all features (including the ‘controls’ attribute which gives native playback controls) of the specification are there yet. The current implementation supports all formats that QuickTime supports, including installed 3rd party codecs.

The example below uses the ‘poster’ attribute of the

Opera’s implementation is similar, including informative text when the media is not available:

<video controls src="demo.ogg" id="myVideo">Theora decoder not found</video>