SVG Wow! http://svg-wow.org/blog Mon, 03 Mar 2014 21:47:48 GMT Blogofile hourly 1 Rotozoom video http://svg-wow.org/blog/2011/03/28/rotozoom-video Mon, 28 Mar 2011 23:08:00 EDT http://svg-wow.org/blog/2011/03/28/rotozoom-video Rotozoom video

Homage to Future Crew's Second Reality [youtube] rotozoomer effect.

The music was composed by Skaven and Purple Motion and is from the original demo.

The demo uses svg patterns and in particular the patternTransform attribute to create the rotozoom effect. It's based on this demo with kind permission from mr doob.

The video is old archive footage showing Vice Admiral William H.P. Blandy giving a speech before the Bikini nuclear test. A transcription of this videoclip:

The bomb will not start a chain-reaction in the water converting it all to gas and letting all the ships on all the oceans drop down to the bottom. It will not blow out the bottom of the sea and let all the water run down the hole. It will not destroy gravity. I am not an atomic playboy, as one of my critics labeled me, exploding these bombs to satisfy my personal whim.

This particular video is used since the original demo had a sample with the phrase I am not an atomic playboy.

To play the video inside the svg pattern, an attempt is made to use the svg 'video' element, and if that's not supported the fallback is rendering video to a html5 'canvas' and inserting the rasterized movie frames into the svg pattern as a normal image. Technically a 'foreignObject' element with html5 'video' could also have been used, however no browser was capable of displaying 'foreignObject' elements inside a pattern at the time of writing this demo (just before the SVG Open 2010 conference).

The music uses the html5 'audio' element, providing three levels of fallback, first in the original ScreamTracker format, then as Ogg Vorbis, and as a last option as MP3. The video is also provided in three formats (webm/vp8, mp4/x264, ogg/theora), for wider compatibility.

]]> Video Overlay http://svg-wow.org/blog/2009/10/04/video-overlay Sun, 04 Oct 2009 15:00:00 EDT http://svg-wow.org/blog/2009/10/04/video-overlay Video Overlay

This example illustrates the use of the following features:

  • SVG Tiny 1.2 <video> and using SVG DOM interfaces for play and pause
  • SVG declarative animations (SMIL)
  • external SVG resource files
  • SVG filters

See attributions about the resources used in this demo.

]]> Video http://svg-wow.org/blog/2009/10/04/video Sun, 04 Oct 2009 15:00:00 EDT http://svg-wow.org/blog/2009/10/04/video Video

This example illustrates the use of the following features:

  • SVG Tiny 1.2 <video>
  • SVG 1.1 circular clipping on playing video
  • external SVG resource files
  • HTML5 video
  • SVG used as a CSS 'background-image'
  • CSS3 media-queries for adapting to different windowsize
  • CSS3 webfonts

See attributions about the resources used in this demo.

]]>