demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Move your mouse, tap, or wipe to compare videos. Footage © Orchard Film Studios

HTML5 Video Before-and-After Comparison Slider

html / multimedia

Estimated reading time: 3 minutes, 45 seconds

Recently a reader, inspired by my recent explorations into before-and-after comparison sliders for images, wrote to me with an interesting question: could the same effect be achieved with video?

At first, the solutions I came up with seemed rather complex: my initial thought was to take the feeds from the before and after videos and pipe them into a <canvas> element, moving the divisor there. While an intriguing possibility – and one that remains worthy of future exploration – I found that my initial experiments suffered badly in both performance and UI.

Frustrated, I set the problem aside for a while. The biggest challenge was that variations of my original technique seemed not to apply: my earlier responsive solutions had all depended on the fact that a could be scaled alongside a real <img> using background-size: cover, but video can’t be made into a background, at least not without some hacks.

Then I had a moment of insight. What if I scaled one of the videos opposite to the slider effect? The code could start off very much the same as earlier comparators:

Photograph of the Coachella main stage at night, taken in 2014

Preflight Your Video For Delivery in HTML5

html / multimedia

Estimated reading time: 5 minutes

Since my fullscreen video web page background article was published, some readers have commented that video content does not appear on their pages when they use the code in their own projects. When I’ve had the opportunity to test the pages, the issues have been due to poor encoding or delivery of the video, not the CSS code.

To address this, I thought it might be useful to have a list to test video content during site production. Think of this as a web video quality control process, one that attempts to guarantee that HTML5 video will be delivered smoothly to modern browsers.

I’d suggest the following steps:

Track24 Ghosts III
AlbumGhosts III
ArtistNine Inch Nails
Time00:00

Making An Audio Player With HTML5, Part 2: Prototyping

html / multimedia

Estimated reading time: 5 minutes

There are two approaches to making almost anything. The first is to dive in head-first, building from the top down, squirrelling into problems as they are found and hoping you’ll get everything right. The second is to create a series of simple test cases: building upwards, proving each step before using the work to generate a final, complete piece.

There are advantages to both methods, but the second tends to yield better results. I’ll demonstrate that approach here, in building the initial prototype of the web audio player I introduced in part 1 of this series.

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.