background preloader

HTML5

Facebook Twitter

Video for Everybody! Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing.

Video for Everybody!

It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms. Thanks to the rapid adoption of HTML5 video happening right now, Video for Everybody isn’t the only solution around. It is not a neatly packaged, fully-featured solution for those unfamiliar with HTML. VfE is for developers who either want something really simple they can quickly use on their blog or websites, or as a good starting point to develop their own custom solution. It does not use JavaScript. How It Works If your browser supports it, HTML5 video is used. If HTML5 video is not supported, Adobe Flash is used. Finally, if all else fails, a placeholder image is shown and the user can download the video using the links provided. VfE The Code Using. LakTEK – Implementing Web Socket servers with Node.js. Selectable Shapes Part 2: Resizable, Movable Shapes on HTML5 Canvas - simonsarris.com.

Wait!

Selectable Shapes Part 2: Resizable, Movable Shapes on HTML5 Canvas - simonsarris.com

This tutorial is rather old and I’ve given part one a major overhaul. You should really read (or at least start with) the new one here instead. In the first tutorial I showed how to create a basic data structure for shapes on an HTML5 canvas and how to make them selectable, draggable, and movable. In this second part we’ll be reorganizing the code a little bit and adding selection handles so we can resize our Canvas objects.

The finished canvas will look like this: Click to select a box. This article’s code is written primarily to be easy to understand. In this tutorial we will add: Code for drawing the eight boxes that make up the selection handlesSome small adjustments to the draw codeCode to be run on every mouse move eventCode for changing the mouse cursor when it is over a selection handleCode for resizing Drawing the selection handles The eight selection handles are unique in that each one allows you to resize an object in a different way. Draw’s new home myMove revisited. Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example - simonsarris.com.

I’m writing a book on HTML5, including Canvas!

Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example - simonsarris.com

Click here for more information. Wait! I’ve given this tutorial a major overhaul and you should really read the new one here instead. This is part one in a series. Part 2 can be found here. This tutorial will show you how to create a simple data structure for shapes on an HTML5 canvas and how to have them be selectable.