Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 21 2014


February 17 2014

Sponsored post

January 28 2014


26 Examples of Fullscreen Video Backgrounds in Web Design

Advertise here with BSA

The notable trend of fullscreen media has exploded on the web. Images require less bandwidth and also provide a means for rotating backgrounds. However videos provide a very rich user experience – they provide something to immediately captivate the visitor and draw them deeper into a website.

Online creative studios and digital agencies often utilize fullscreen video backgrounds to convey a small piece of their message. This gallery is focused on 26 prime examples of websites utilizing fullscreen videos. Some are built using Adobe Flash while others are embedded using JavaScript. Either way these video effects are unique, enlivening, and definitely on the rise amongst modern-day web designers.


august beta website artists musicians creatives


core4 video background website design layout


bradient downtown los angeles web design agency

Scooma Design

scooma design fullscreen video background

Coulee Creative

coulee creative fullscreen background videos homepage

Joe San Clothing

joe san clothing background video website design

Bienville Capital Management

new york city nyc bienville capital


whiteboard is background fullscreen video webdesign

Risk Everything

homepage fullscreen video background risk everything

Squat Design

squat design homepage studio video background


sketchin homepage fullscreen background video design


spry digital interactive agency website video bg

Various Ways

various ways creating engaging experiences


russian design agency monsorro background video


bkwld video background ui design homepage effect

Story & Heart

story and heart website fullscreen video design


whiteroom design agency video fullscreen effect


net forest background video japanese layout design


aldo shoe getaway fullscreen video landing page


pinkanova video studio production company fullscreen video

Kickstarter Team

kickstarter startup team webpage video background

L’attrape Reve

lattrape reve gallery inspiring video design

Marisa Passos

marisa passos video background ux ui design

theQ Camera

theq camera website fullscreen video design

Pool House Digital

website fullscreen background layout poolhouse digital

Positive Advertising

positive advertising web design video background

Advertise here with BSA

November 18 2013


September 09 2013


MakeWebVideo – Great Videos At Great Price

Videos are one of the best means of communication for any business. These days we can see their extensive usage in all spheres of business. Be it on your website or the social media you can communicate much more in a video compared to writing paragraphs of boring text. Gone are those days when creating a video for your business would involve mastering one of those complicated video editing tools or hiring the services of a professional artist which would cost you dear. Today there are a number of online tools that allow you to create videos with ease and don’t need you to have any prior expertise in creating videos.

MakeWebVideo is one such tool that has become a talking point of late. This tool is creating ripples in the market as it is easy to use and allows you to create animated videos in a matter of 30 minutes. The videos are created using Adobe After Effects which is known to be of the most popular video editing tools and offers great output. You won’t need to invest on any expensive tool or software as it is completely browser based and allows you to create an attractive video that helps you brand your business. Basic skills with the computer and Internet are all that you need to create a video using this tool.

Screen Shot 2013-09-06 at 10.16.21 AM

Ease of Use

It is unlike any other tool that you must have already used to create videos. There are no unnecessary tools that can easily confuse a user and act as a turn off. The clean and easy interface is welcoming and it doesn’t take you time to get started with this tool. In fact the steps are so self-explanatory that you can come out with a professional video even in your first attempt. The only thing that you are required to do in this tool is upload text, footage, images and graphics onto the site and get the video that will help you create an impact on the minds of the viewers.

Get The Video The Way You Want

If there is one thing that puts this tool ahead of all major competitors is the wide choice of templates that it offers. Depending on your needs and niche you can create a video that will best appeal to your target audience. These templates have been created by some of the best video artists in the world. They provide you the basic skeletal structure that is required to create an amazing video. Templates that are currently available with this online tool include Ink Effect, 3D Design, Slideshow, Text Only, Cartoon, Tablet, Children, Scrapbook, Pop-Up Book, Corporate and Animated Explainer.

Screen Shot 2013-09-06 at 10.18.43 AM

Get Video In Three Steps

We have already spoken about the ease of use relating to this tool and now we shall see how you can create a video in three easy steps. No time wasted in getting acclimatized to this tool or installing any software or plugin. Here are the three easy steps towards getting a professional video.

# Step 1 – In the first step you will need to choose among the templates. This is the most important step in the process as you need to consider a lot of things while making the choice – target audience, the kind of message you want to spread etc.


#Step 2 – It is the step in which you will decide how your final video would look like. Once you have chosen the template you will need to upload the texts, footages, pictures and graphics which will make your video. Upload these in a sequential order and be very careful with the spellings in the text. The last thing you want is a sloppy looking video.

# Step 3– This is the last and the final step in the process and here you will generate the video with a mouse click. In this step you will also get the embed code using which you will be able to embed this video on any website directly from their server.

Advantages of MakeWebVideo

  • Hosting Services – Videos consume a lot of disk space and for most other tools you will need to search for a hosting service provider. But with this tool you won’t have to worry about that as it also offers you hosting services. The videos are hosted on a fast and secured server.
  • Compatibility – Unlike other online tools it is compatible with all the browsers and operating systems that you can think of. It is a complete online tool and doesn’t require any additional plugins or software to be installed.
  • Video In 30 Minutes – It takes only 30 minutes for you to create a video for your brand. This is something only MakeWebVideo can offer you. You will have complete control over your workflow and can work from anywhere you want. Most of the stages of creating a video have been automated in this tool and thus saving you hours of manual labor that is quite common with other tools that are available in the market.
  • HD Videos – There is a lot of craze for HD video and why not when computers, smartphones and tablets are going HD and internet speeding up all across the globe. This tool allows you to create full HD videos that have information in detail. This will definitely add to your brand value.
  • Multiple Formats – This tool allows you to generate videos in multiple formats including HTML5 video formats which can be integrated into your website. Apart from this you can also download the video in MP4 and WEBM formats that can easily be uploaded on social media sites such as Facebook and YouTube.
  • Three Dimensional Graphics – Adding depth to a video increase its appeal and this can be achieved using three dimensional graphics in the video. With the help of this tool you will be able to add 3D graphics in your video easy and also add special effects that attract the attention of the audience.

Attractive Pricing

With all these benefits you might think this online tool to be highly expensive. This is where MakeWebVideo stands ahead of its competitors as it allows you to create a professional business video for as low as $19 USD. This makes the tool highly affordable for small business and startups who can’t afford large sums of money on creating a video. They also promise you 100% money back guarantee in case the video if you aren’t satisfied with the product. You can also create a free preview video which will give a glimpse of what the tool is capable of.

The Verdict

Promoting your business with a video is no longer a matter of choice but a necessity in today’s competitive business environment. In such a scenario if you are looking for a tool that helps you in creating attractive videos MakeWebVideo is surely one of your best bets. It is extremely easy to grasp and allows you to customize the video the way you want it. Your hunt for a professional video creation tool ends here and we can surely stamp on the scalability and versatility of MakeWebVideo.

Checkout MakeWebVideo Templates

July 22 2013


July 21 2013


Wonderland. A short documentary on creative commerce.

A few creative professionals share insights on “the pursuit of financial profit, and the many directions you can intentionally or unintentionally find yourself taking.”

“In Spring 2013 we set out for a month to make a short educational piece providing a glimpse of what it is like to work in the creative industry. The idea was born out of our own questions and struggles on how to deal with things that may seem out of your control.”

Watch on Vimeo. By Eskimo Digital Filmmaking.

Identity Designed

Brand identity inspiration on Identity Designed.

May 20 2013


May 14 2013


April Resource Roundup: Food for Thought

While they might provide food for thought on the weekends, a new perspective before the workday, and/or even a way to unwind before bed, many design resources are far from revolutionary. Yet we hold out hope, as some of the best help change our (team’s) perspective. Nine such resources came to our attention this past month.

Design research, content strategy, gamification, oh my! Here’s the goods to make us good (err, well, better):

Design research

Design research is a necessary part of every user-centered design project, so more resources to that end never hurt:

Content Strategy

Far too many content strategy articles focus on the outcome rather than a productive “how to” – especially when it comes to writing. The following resources focus more on how to write effectively.

  • Tone of voice. Creating a solid “voice” is difficult, even for experienced content strategists. Enter Gather Content: A Guide to Tone of Voice. Created by Gather Content’s Kevan Gilbert back in November, this article provides a rough heuristic for lending personality to your website or application.
  • Valuable content. Those looking for more content strategy advice should check out Ahava Leibtag, President of Aha Media. She’s been practicing content strategy since 2005 (!), and her Creating Valuable Content checklist is a gift to anyone tasked with its creation. It’s simple to use and easy to adapt.
  • Using comics. Kevin Chang’s book, “See What I Mean,” was written in a show-and-tell fashion, beginning life as a presentation. The book demonstrates how comics can engage teams and facilitate understanding. Read it, and you’ll… see what I mean.
  • Health literacy. Although it was published all the way back in 2010, the US Department of Health and Human Services’s Health literacy online guide is as contemporary as ever. Chock full of research, design advice and content considerations, it’s an easy recommendation.


The gamification debate is complex. While it’s generally agreed that adding a “game layer” to an application is not a solution, there’s definitely value in incorporating engaging elements into our websites. These two resources dig a little deeper into the true aim of gamification:

  • Fun and (learning) games. Keeping the Play in Learning is a video highlighting the game mechanics inherent in education, banking, eCommerce, and other daily tasks. Play is also the subject of a TED talk or two.
  • Engagement via gamification. Chris McClelland’s presentation, engagement through gamification, examines the differences as well as the similarities between game mechanics – rewards, achievements, and competition – and UX best practices.

Live and learn

Ours is a rapidly evolving field, and every so often we learn another way to make the process more efficient. Leave a comment with your own favorite infographics, process-changing checklists, or a slideshare or video that speaks to the innovative designer in you.

The post April Resource Roundup: Food for Thought appeared first on UX Booth.

June 18 2012


May 07 2012


Woork Up Video Episodio 1

In questo episodio – Facebook alla vigilia dell’offerta pubblica d’acquisto, raggiungerà i 100 miliardi di dollari di valore? Guai per il CEO di Yahoo! Scott Thompson per un curriculum taroccato. LG presenta la Google TV. il pinterest del porno.

NOTA: Visto che questo è il primo episodio, suggerimenti di ogni tipo sono graditissimi.

Tags: Video video

February 20 2012


Exclusive Interview with Brian Solis: Social Influence, Content Curation and Future of Social Media

In this exclusive interview for Woork Up, Maria Petrescu ( talks with Brian about the meaning of social influence, use of social media inside companies, the problems caused by the lack of communication between divisions and asked to Brian a prediction on the future of social media.

External link: Read the full transcription on Intervistato.

January 26 2012


January 24 2012


50+ WordPress Themes for Video Bloggers

With the advent of video sharing websites such as YouTube, Vimeo and Metacafe, video blogging has gained momentum like we’ve never seen before. Now it is easier than ever to upload, view and share videos — especially due to the plethora of awesomeness that comes bundled with HTML5. WordPress, of course, can be used for video blogging too. WP themes for video blogging pack in many custom features –special widgets to share videos, support for multiple formats and embeds, to name just a few!

In this article, we shall take a look at some of the specialized themes available for video bloggers, both and free and premium. So without further ado, here is the list!


(Free themes after premium)

1. Adventure (Regular License: $40)

Live Preview | Download

2. Black Label (Regular License: $30)

Live Preview | Download

3. Breeze (Regular License: $35)

Live Preview | Download

4. Especial (Regular License: $35)

Live Preview | Download

5. eVid (Club Membership: $39 per annum)

Live Preview | Download

6. Fast Blog (Regular License: $35)

Live Preview | Download

7. FolioFlip (Regular License: $30)

Live Preview | Download

8. Fresh>Trailers (Regular License: $39.99)

Live Preview | Download

9. Garnish (Regular License: $40)

Live Preview | Download

10. Gigawatt (Regular License: $50, Membership: $125)

Live Preview | Download

11. Groovy Video (Regular License: $70)

Live Preview | Download

12. Hash One (Regular License: $50, Membership: $125)

Live Preview | Download

13. Invictus (Regular License: $35)

Live Preview | Download

14. LeetPress (Regular License: $35)

Live Preview | Download

15. Live Theme (Regular License: $49)

Live Preview | Download

16. Magnifizine (Regular License: $35)

Live Preview | Download

17. MG Universal (Regular License: $35)

Live Preview | Download

18. Modularity (Membership starts at $49)

Live Preview | Download

19. MonstrFolio (Regular License: $35)

Live Preview | Download

20. Motion Picture (Regular License: $50, Membership: $125)

Live Preview | Download

21. Multimedia (Regular License: $35)

Live Preview | Download

22. MultiMedia Reloaded (Regular License: $25)

Live Preview | Download

23. MultimediaWP (Regular License: $35)

Live Preview | Download

24. MyStream (Regular License: $70)

Live Preview | Download

25. Nucleus (Regular License: $40)

Live Preview | Download

26. Object (Regular License: $70)

Live Preview | Download

27. On Demand (Regular License: $75)

Live Preview | Download

28. Parachute (Regular License: $35)

Live Preview | Download

29. Periodic (Regular License: $35)

Live Preview | Download

30. Pinotage (Regular License: $50, Membership: $125)

Live Preview | Download

31. Playtime (Regular License: $75)

Live Preview | Download

32. Premiere (Regular License: $70)

Live Preview | Download

33. Reflex (Regular License: $35)

Live Preview | Download

34. ReviewIt (Regular License: $45)

Live Preview | Download

35. Slide (Regular License: $35)

Live Preview | Download

36. Tarnished (Regular License: $35)

Live Preview | Download

37. TV Elements (Regular License: $75)

Live Preview | Download

38. Veddio (Regular License: $32)

Live Preview | Download

39. Video Elements (Regular License: $75)

Live Preview | Download

40. Video Flick (Regular License: $75)

Live Preview | Download

41. Videozoom (Regular License: $69)

Live Preview | Download

42. Vidley (Regular License: $75)

Live Preview | Download

43. Wave (Regular License: $35)

Live Preview | Download

44. WooTube (Regular License: $70)

Live Preview | Download

45. WP Color Video (Regular License: $30)

Live Preview | Download

46. WP-MediaMag (Regular License: $59)

Live Preview | Download

47. wpShow (Regular License: $25)

Live Preview | Download


48. Foxinni

Live Preview | Download

49. Selecta

Live Preview | Download

50. Smashing Multimedia

Live Preview | Download

51. Video

Live Preview | Download

52. Videographer

Live Preview | Download

53. WP Mods Video Theme

Live Preview | Download

With this we come to the end of the round-up. If you know any other noteworthy video themes for WordPress, feel free to mention them in the comments!

January 22 2012


Use Screenr to Record Screencasts for Your Website

Are you looking to make your website more engaging? Are you in need of a new way to explain some of your website features? What if you could use a free online tool to create engaging screencasts in as little as a few minutes? Screencast software has been around for years. There are some really great tools already out there. With that said, a new free screencast program has hit the streets and it’s looking to make things even easier for users. In this article we are going to explain what Screenr is, how to use it, the benefits you’ll receive, as well as, see how it stacks up against other free AND paid screencast software tools.

What Is Screenr?

Screenr is a new screencast recording tool. Screenr allows you to record screencasts and publish them to a unique web page on Screenr. Website owners can take advantage of this new free tool for creating things like product demos, explaining features of their website, comparing other websites to their own, etc. What’s nice about Screenr is that it’s completely web-based, so there’s nothing to install. It runs on both Macs and PCs. It’s free to use and the video/audio quality is quite good.

How to Record Videos Using Screenr

Interested in testing Screenr out? Nice! It’s extremely simple to use. Here are the steps that you need to follow to use Screenr effectively:

  • Navigate to
  • Click the record button
  • Position the recording frame on the area of your screen that you want to record
  • Choose your microphone – You may want to use a headset for top audio quality
  • Click Record

Everything you say and do is now being recorded. You can pause your recording at any time. Simply click ‘Done’ when your recording is complete. You can then use the text box to add a message to your Screenr screen cast. That message will then appear under your screencast, which is served up on its own unique web page.

It’s that simple!

Benefits of Recording Screenr Screencasts for Your Website

Screenr is a great tool for making your website more interactive. Instead of simply explaining a new product, service, news article, website feature, etc. with copy, you can now easily do it with video and audio. Screencasts are much more engaging than reading words on a web page. Here are a few of the many benefits you’ll receive if you start using Screenr to record screencasts for your website.

  • Easily explain new or complex features of your website with audio and video
  • Quickly create screencasts for your website – Screenr recordings literally take a few minutes from start to finish to create.
  • Use Screenr to capture feedback from your website visitors. Record a screencast and ask the viewers to leave comments with their opinion on any topic you’d like.
  • Ability to share it on Social Media channels like Facebook and Twitter
  • Upload to your YouTube Channel
  • Easily embed your screencast into your website
  • It’s FREE

Other Screencast Software

As we mentioned above, there are a lot of other screencast software programs out there for you to take advantage of. Perhaps you’ve even used some of them. Before completely ignoring these other screencast applications for Screenr, let’s examine some of them so that you can make an educated decision on which screencast software makes the most sense for you and your website.


  1. iShowU HD - iShowU HD is a relatively cost-effective screencast program for Mac users only. The base package is $29.95, with the Pro version running $59.95. Once nice feature that iShowU HD provides is the ability to integrate webcam footage into your screencast.
  2. Camtasia - Camtasia is another great screencast option. Camtasia is a bit more expensive than iShowU HD, but it does work for both Mac and PC users. The Mac version will only cost you $99, while the PC version is $299. You might be thinking that $299 is much more expensive than FREE, and it is. With that said, Camtasia is known throughout the industry as one of the best, if not the best, screencast software out there. One really cool new feature is Camtasia works with Windows Speech Recognition to automatically turn your audio into captions! You then have the ability to fix anything missed in the transcription.


  1. Webinaria - Webinaria is Windows-only open source screencasting software. It allows users to record screencasts as an .avi files and turn them into .FLV files. You can then go in and add audio to your file. Webinaria allows users to add in webcam footage and leave captions for their viewers.
  2. Jing - Jing offers both a free version and paid version. Jing runs on both Macs and PCs and allows users to create quality screencasts. The paid version allows you to upload directly to YouTube, which the free version does not. With that said, using the free version still provides users with a quality screencast to share with their audience. Jing also allows users to capture screenshots in addition to screencasts.

Here’s a more extensive list of free screencasting tools.

Pros and Cons to Using Screenr Over Competitors

Now that we have seen what other screencasting software is out there, let’s take some time to compare those competitors with Screenr. Below is a list of pros and cons to using Screenr over its competitors:

Pros for Screenr

  • Screenr is 100% FREE while other screencasting software can be expensive
  • Some screencasting software is free, but they limit the features that you have access to
  • Screenr works for both Mac and PC users
  • Screenr is EXTREMELY simple to use
  • Audio can be recorded during the screencasting session, instead of adding it in at a later point, as is the case with some other screencasting software
  • Screenr allows users to easily upload to YouTube, embed in your website, and share on social media
  • Screenr publishes all screencasts on their own unique web page, allowing users without a website a location to publish screencasts to

Cons for Screenr

  • Screenr doesn’t offer as many bells & whistles as some of the paid screencasting software
  • Screenr doesn’t allow you to integrate webcam footage into your screencasts
  • You do not have the ability to edit your screencasts once they are published

Will You Use Screenr to Record Screencasts?

After doing a little research, reviewing this article, and taking some time to think through what you’re looking to achieve for your website, do you think you’ll use Screenr over its competitors to create your next big screencast? Screenr seems like a great tool. Each time I have used Screenr it has worked perfectly. I’m sure other screencast software can work well for you, but for me, Screenr is my screencast tool of choice. How about you? Will you use Screenr? Leave your comments below.

“So that’s Screenr. Screencasts made easy!” –

January 20 2012


January 10 2012


Samsung Galaxy Nexus video review: il migliore smartphone Android di sempre

Dimenticate tutto quello che avete visto e conosciuto delle device Android fino a questo momento. Dimenticate anche tutte le versioni precedenti di Android con le quali avete avuto il piacere o il tormento di avere a che fare.
Il nuovo Samsung Galaxy Note porta l’esperienza d’uso delle device che supportano il sistema operativo mobile di Google ad un nuovo livello mai visto prima. E gran parte di questo risultato dipende soprattutto dal nuovissimo Android Ice Cream Sandwich che rende il Nexus il migliore smartphone Android di sempre.

January 05 2012


An In Depth Overview of HTML5 Multimedia and Accessibility

In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, you’ll increase the availability of your media to users with different
needs and requirements, making it more accessible.

This tutorial comes courtesy of the recently released HTML5 Multimedia book.

Media and Potential Accessibility Issues

I’d strongly encourage you to think about making your content accessible…

When thinking about the users who will be attempting to view your media content, you might make a number of assumptions:

  • Users will view your content on a desktop, laptop, tablet, or phone.
  • Users will have some way of listening to the audio of your content, be it via
    headphones or speakers.
  • Users will be able to understand the language in which you deliver the media.
  • Users will be able to successfully download and play your media.

All are fairly reasonable assumptions to make and most likely cover the vast majority of users who will want to access your content. You may be happy with your content being accessible to these users only; after all, majority rules, doesn’t it?

Well, I’d strongly encourage you to think about making your content accessible to users who do not fall into the category of the assumptions just listed. Who are these viewers? They include:

  • Users who have a sensory impairment that prevents them from listening to your content’s audio or viewing video.
  • Users who don’t understand the language the media is delivered in.
  • Users who use devices such as screen readers and/or use keyboards to access
    media content on the web.
  • Users who can’t successfully hear or view your content due to the environment they are in or because of device limitations.

Because most media content will usually include some audio, not being able to hear or understand the audio it contains is quite a showstopper in comprehending the content’s message and information.

Equally, being able to access the content through a device such as a screen reader but then not being able to actually use it due to the media controls not being properly set up (e.g., for keyboard access) would annoy any user.

You’ll explore the accessibility of media controls later in this tutorial. You’ll also take a look at what HTML5 brings to the table in an attempt to address the issue of users being unable to see, hear, or understand your media content. But first, let’s take a quick look at what led to HTML5’s attempt to confront this accessibility problem — SRT.

A Brief Look at SRT

SRT is an existing file format for containing video subtitles and their timings.

SRT is an existing file format for containing video subtitles and their timings. An SRT file is often produced automatically using a Windows program called SubRip, which uses optical character recognition (OCR) to obtain the subtitles from the specified video source.

The SubRip file format is a basic text file with the .srt file extension that follows a basic format:

  • Subtitle number
  • hh:mm:ss,msmsms —> hh:mm:ss,msmsms
  • Subtitle Text (one or more lines)

Each subtitle set begins with a unique subtitle number, followed by the start and end timestamps of the timing the subtitle represents on a separate line, which is then followed by one or more lines of subtitle text. Each subsequent subtitle set is separated by a blank line. The timestamp format hh:mm:ss,msmsms specifies the hours, minutes, seconds, and milliseconds of the time in question. Note that the millisecond separator is a comma.

An example of such a file follows:

00:00:10,500 --> 00:00:13,000
Elephant’s Dream
00:00:15,000 --> 00:00:18,000
At the left we can see...

The SRT file format is quite popular and is often the format that video subtitles are released in. This file format isn’t currently used as part of HTML5’s attempt to tackle accessibility, although it was to begin with but has now been extended and given a new name, WebVTT.

Introducing WEBVTT

WebVTT (Web Video Text Tracks) is a file format that is intended for marking up external text tracks. It was initially part of the WHATWG and the W3C HTML5 specifications, and was an extension of SRT called WebSRT (Web Subtitle Resource Tracks). But the W3C was concerned that HTML5 should be independent of any chosen captioning format, and therefore, it was removed from that specification.

Note: even though the SRT in WebSRT stands for subtitle resource Tracks, the original acronym didn’t stand for anything and merely reflected
the file extension used. WebSRT is a “backronym”; subtitle resource Tracks was shoe-horned into the three letters to actually mean something.

The presence of WebVTT is currently one major difference between the WHATWG HTML5 specification and the W3C specification.

Although no browser currently supports WebVTT, major browser vendors have indicated that they will implement support for WebVTT in the future. This indication has led to the creation of a WebVTT Working Group Charter at the W3C, whose mission is to:

“create a W3C specification starting from the WHATWG WebVTT (Web Video Text Tracks) language and solidify it through the creation of a WebVTT test suite and through the creation of semantic mappings of other subtitle formats to or from WebVTT in order to facilitate browser implementation and market adoption.”

This promise of vendor support will hopefully in turn eventually lead to a formal standardization of the WebVTT specification at the W3C. With browser support and that of the W3C, you can be sure that WebVTT is here to stay and is destined become the de facto method of marking up text tracks within audio and video content on the web.

So what is the WebVTT file format and how can it help you make your content accessible? Read on.

What Can WebVTT Do?

The WebVTT format also allows you to provide a textual description of the video content

You use the WebVTT file format to define WebVTT files. One of the main uses of these files is to provide subtitles to video content, although the format of the file doesn’t indicate what its contents are used for.

The WebVTT format also allows you to provide a textual description of the video content, which can then be used by various accessibility devices (which might read the descriptions out loud) to describe the content of the video to those who cannot see it. You inform the browser of the WebVTT file and of its purpose using HTML markup; you’ll find out how this is done later in this tutorial, when you read about the track element.

Let’s take a look at the WebVTT file format in more detail.

WEBVTT File Format

A WebVTT file is a simple text file with the .vtt extension that needs to follow a specified format, which you will look at shortly. The file must be encoded as UTF-8 and labeled with the MIME type text/tt. The line terminators within the file can only be \r (a carriage return), \n (a new line), or \r\n (a carriage return followed by a new line). It must also contain a WebVTT file body, which consists of the following:


The WEBVTT string at the top identifies the contents as a WebVTT file and must then be followed by at least one blank line, which is then followed by any number of cues, each of which is separated by a blank line.

A cue is defined as:

[hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings]

idstring is a unique identifier within the file that identifies the cue. It can consist of one or more characters that do not contain the substring “—>” or any of the line terminators mentioned earlier. [hh:]mm:ss.msmsms —> [hh:]mm:ss.msmsms indicates the timestamp range within the video file that the cue is specified for. [hh:]mm:ss.msmsms is a simple timestamp; the hour portion is optional (depending on the length of the video in question of course).

Note: The millisecond separators are full stops, not commas as in SRT.

cue settings allow you to specify the positioning of the text; you’ll read more about them in a moment.

TextLineN is the actual text in the video file that the timestamp range in the cue represents. The content can be all in one line or presented in any number of separate lines. Any lines will be contained within the cue until a blank line is encountered, which indicates the end of that particular cue.

Let’s take a quick look at a sample WebVTT file containing two timestamp ranges:

00:00:10.500 --> 00:00:13.000
Elephant’s Dream
00:00:15.000 --> 00:00:18.000
At the left we can see...

This example defines two cues: The first one starts 10 seconds and 500 milliseconds into the video and ends at 13 seconds in, and the second one starts 15 seconds into the video and ends 3 seconds later. The subtitle text for each cue is given below its timestamp.

How a subtitle cue might appear on a video with no cue settings specified.

Using cues is relatively straightforward, and you can see how the file can be built up with a number of cues to cover the length of an entire video. You can also specify some settings on a per-cue basis. These affect the positioning of the cue on the related video. You can have a number of setting values, and a cue setting can contain one or more values, each one separated by a space. The various settings are listed below:

If no cue settings are specified, the text will align to the middle, at the bottom of the video frame.

Let’s add some of these settings to the example used earlier:

00:00:10.500 --> 00:00:13.000 A:start Elephant’s Dream
00:00:15.000 --> 00:00:18.000 A:end L:10% At the left we can see...

The text in the first cue will be aligned to the left of the video (much the same way as the CSS rule text-align:left works).

How a cue subtitle might appear on a video with a cue setting of A:start.

The second cue has two settings applied to it: The text will be aligned to the end of the line (similar to text-align:right in CSS) and will be placed on the line 10 percent down from the top of the video.

How a cue subtitle might appear on a video with a cue setting of A:end L:10%.

In addition to specifying cue settings for controlling the positioning and alignment of cue text, there are also a number of inline styles that you can apply to the text. These look and act the same as HTML elements. They contain a start and an end tag, and the formatting is applied to the text in between.

Let’s extend the example further and use some of the text tags to format the cue text:

00:00:00.000 --> 00:00:14.999 Elephant’s <c.dream>Dream</c>
00:00:15.000 --> 00:00:18.000 A:end L:10% At the <i>left</i> we can <b>see</b> ...
00:00:18.167 --> 00:00:22.000
At the right <00:00:20.000>we can see the...

With the first cue, a class name of “dream” has been added, a style for which you can define within your HTML file in the same way as you’d create any CSS style rules.

Video-cue text with a style defined using CSS and the WebVTT c text tag.

Note: any CSS class names that you might use within your WebVTT subtitle definitions can be defined in the containing HTML file or an external css file in the same way as you’d specify any other css classes.

The second cue now has tags that will display the word “left” in italics and “see” in bold type.

Video-cue text that uses the i and b text tags.

An extra cue is added to this example to show how the timestamp is used to display the text “karaoke style.” When the cue starts, the words “At the right” will appear first. Then the text “we can see…” will be displayed at the appropriate time- stamp (Figure 8.6).

Note: if you want the characters &, <, and > to appear in the text of a video cue, you need to escape them with &amp; &lt; and &gt; respectively.

This video-cue text shows the text in stages.

WEBVTT Future Developments

It’s worth noting that because the WEBVTT file format is relatively new to the specification and with the recent creation of the WEBVTT Working Group Charter, additions to the specification are likely.

If you want to keep abreast of any changes to this specification, keep an eye on the Working Group Charter’s site and the blog of Silvia Pfeiffer who is currently editor of the Working Group Charter. Silvia also blogs regularly about HtML5-related accessibility topics.

You can see how the complete narrative in a video could be added to a WebVTT text file with formatting and styling.

But how do you connect a WebVTT file with a particular video? This is where the new HTML5 track element steps in.

The Track Element

The track element is one of the new HTML5 elements. Its purpose is to allow external text tracks to be specified for media elements, such as audio and video. The track element does not represent anything on its own and must be used in conjunction with, and as a child of, a media element.
The track element takes a number of attributes, which are listed below:

The following example shows how a track element might be used in connection with a video to provide subtitles:

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    <track src="en.vtt" kind="subtitles" srclang="en" label="English p subtitles">

The track element in the example specifies that the en.vtt file contains English subtitles (as the label says) in the English language (srclang is set to en) of kind: subtitles for the surrounding video element. From this example, you can see just how easy it would be to add a second subtitles file that might be in a different language:

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    <track src="en.vtt" kind="subtitles" srclang="en" label="English p subtitles" default>
    <track src="de.vtt" kind="subtitles" srclang="de" label="German p subtitles">

Here, another track definition has been added, pointing to a de.vtt file that contains German subtitles; srclang is set to de.

Notice that the default attribute has been added to the English subtitles definition, marking it as the default subtitle set to be used if the user doesn’t specifically select one.

If you wanted to extend the example further and add a chapter listing in each language (English and German), you would do the following:

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    <track src="en.vtt" kind="subtitles" srclang="en" label="English p subtitles" default>
    <track src="de.vtt" kind="subtitles" srclang="de" label="German p subtitles">
    <track src="ch-en.vtt" kind="chapters" srclang="en" p label="English chapter listing" default>
    <track src="ch-de.vtt" kind="chapters" srclang="de" p label="German chapter listing">

Once the various WebVTT files have been created with the content you want, it’s a fairly simple process to add them to the appropriate video.

Everything you’ve just read about WebVTT all sounds quite promising; however, even though some browsers support the track element to some degree, currently no browser supports the WebVTT file format.

Note: at the time of this writing, the Webkit (which chrome and safari are based on) nightly build has some support for WebVTT.
All is not lost, though, because several JavaScript libraries are available that enable you to start using WebVTT today.

Using WEBVTT and the Track Element Now

A small number of browsers support the track element to some degree. The latest WebKit browsers (e.g., Chrome 12 and Safari 5.0.5) recognize the element but don’t do anything with it. The current version of Firefox (5) parses the element but also does nothing with it. Although these browsers are taking steps in the right direction, they don’t really help you implement WebVTT now.

Fortunately, four JavaScript libraries allow you to define the track element with WebVTT files in your web document that will deliver what you want:

  • J Playr – Supports: subtitles, chapters, some cue settings Browsers: Opera, Chrome, Safari, Firefox
  • LeanBack Player – Supports: subtitles
    Browsers: All major browsers with fallback to Flash if required
  • Captionator – Supports: subtitles, all cue settings Browsers: Opera, Chrome, Safari, Firefox, IE9
  • MediaElementJS – Supports: subtitles (timing format uses SRT format)
    Browsers: All major browsers with fallback to Flash if required

SRT Support

Although only a handful of JavaScript players support WEBVTT, a number of them support SRT subtitle files. those players that support WebVtt (Playr, LeanBack, Captionator, and MediaElementJS) also support SRT in addition to the following that provide support for SRT only:

None of these libraries offer support for all the different values for the kind attribute of the track element: They only support the subtitle value (Playr also supports the chapter value). Because subtitles are one of the most important values, it’s a good start. This support also allows you to begin adding subtitles to your videos now and seeing them in action.

Let’s look at how you might use the Playr JavaScript library to add subtitles and chapters to a video.

Playr Example

To use Playr, you must first download it from the Playr download website. Once downloaded, you need to include the Playr CSS file and JavaScript in your web document:

<link rel="stylesheet" href="playr.css" />
<script src="playr.js"></script>

When defining your video, you simply add the CSS class “playr_video” to your video element, and Playr will automatically be used for that video.

A sample of Playr with a short animated film called Elephant’s Dream (© copyright 2006, Blender Foundation, Netherlands Media Art Institute, www.elephants is available here.

The code used for this video is as follows:

<video class="playr_video" preload="metadata" controls p poster="elephants-dream.title.jpg">
   <source src="elephants-dream-medium.mp4" type="video/mp4">
   <source src="elephants-dream-medium.webm" type="video/webm">
   <track label="English subtitles" kind="subtitles" srclang="en" p src="elephants-dream-subtitles-en.vtt" default>
   <track label="German subtitles" kind="subtitles" srclang="de" p src="elephants-dream-subtitles-de.vtt">
   <track label="Chapters" kind="chapters" srclang="en" p src="elephants-dream-chapters-en.vtt">

The Playr video player with Elephant’s Dream.

Also, three track elements are used to point to English and German subtitles, and English chapters.

Note: Playr currently doesn’t support multiple chapter files or the default attribute but will do so in a future release.

Playr’s menu allows viewers to choose English and German subtitles plus chapters.
Subtitles have been placed 6 percent from the top (using L:6%) and bolded with <b>.
The same video with German subtitles chosen.
A sample of how chapter selection looks in Playr.

Playr is a handy video player, and its ability to display subtitles and chapters is very useful. Support for the other kinds of track element contents are planned, so like other available video players, it will keep on improving.

Another important part of making media content accessible are the controls. Next, you’ll learn how accessible the default players are and what can you do to make your own custom controls more accessible.

Media Controls and Accessibility

It’s quite important for accessibility that the media controls can be accessed from the keyboard.

As mentioned earlier, it’s quite important for accessibility that the media controls can be accessed from the keyboard. Browsers have their own set of controls for media elements, but how accessible are they from the keyboard? Unfortunately, at the moment, the answer is not very. Opera seems to be the only browser whose default control set is immediately accessible from the keyboard. You can easily tab from one control to the other, use the Return key to toggle the Play/Pause button, and use the arrow keys to control the seek bar and volume control.

So, if you want to make your media content fully accessible across all modern browsers, you need to implement your own custom controls.

Improving the Accessibility of Custom Controls

You’ve already used the HTML button element to implement nearly all of the controls. Using button elements immediately increases the accessibility of the controls because the button element is automatically accessible from the key- board. That fact alone makes the custom controls keyboard accessible. Because the controls are also listed in the same order as they appear on the player, their tab order is also pretty much in the required logical order. However, you might want to change the tab order of the progress bar and the Play/Pause button. Most likely, users would want to play the video first, so that button should be the first control that they can access.

You can specify the tab order of HTML controls using the tabindex attribute. The order specified by this attribute is the one that the browser will tell the key- board to follow. So you apply a tabindex of 1 to the Play/Pause button and 2 to the progress bar, and then apply subsequent tabindexes in the order in which they appear in the source:

<div id="controls">
    <div id="progressBar"><span id="played" tabindex="2"></span></div>
    <button id="playpause" alt="play" title="play" tabindex="1">play</button>
    <button id="stop" alt="stop" title="stop" tabindex="3">stop</button>
    <button id="rewind" alt="rewind" title="rewind" tabindex="4">&laquo;</button>
    <button id="ffwd" alt="fast forward" title="fast forward" tabindex="5">&raquo;</button>
    <button id="volumeDown" alt="decrease volume" title="-" tabindex="6">button>
    <button id="volumeUp" alt="increase volume" title="+" tabindex="7">+</button>
    <button id="mute" alt="mute" title="mute" tabindex="8">mute</button>

In this code listing, the onclick() events have been omitted for brevity.

The Range Element

The range element would be ideal for use as a progress bar if support was better because it too automatically provides keyboard accessibility, and the seek bar would work via the keyboard (the up and down keys would toggle the seek when the element has focus) without any further requirements.

Because the buttons provide keyboard accessibility automatically, all you need to tackle now is the progress bar, which uses a div and a span.
You need to add an event listener for the keypress event, which fires when a key is pressed, and then act on it. You’re interested in just a key press on the progress bar, so the event is added to the progress bar only:

var progressBar = document.getElementById(“progressBar");
progressBar.addEventListener(“keypress", function(e) {
}, false);

The function that is called when a key press is detected is called checkKey() with a parameter indicating the numeric code of the key that was pressed:

function checkKey(code) {
    if (code == 38) { // up arrow key
        video.currentTime += 0.5;
    else if (code == 40) { // down arrow key
        video.currentTime -= 0.5;

The checkKey() function simply checks the key code to see if it’s the up arrow key (code 38) or the down arrow key (code 40). Depending on which key it is, the video’s currentTime attribute is increased or decreased by 0.05 (an arbitrary time value, but it seems a good step to move the video forward or backward by).

And that’s it. The progress bar’s seek capabilities can now be accessed via the keyboard with the up and down arrow keys when it’s in focus. The end result renders your media custom controls a lot more accessible than they would have been.

Wrapping Up

With regard to accessibility, HTML5 has advanced and expanded from its initial definition of the WebSRT file format to WebVTT. With browser vendors planning to support this format, a new W3C Working Group was formed with the intention of formalizing the WebVTT specification for browsers to start supporting. So hope- fully, browser support is only a matter of time.

Although native support is currently patchy, you can use existing JavaScript libraries to add subtitles to your videos now. These libraries will undoubtedly increase their functionality and capabilities in the future.

Overall, accessibility is a goal you should be thinking about when serving multimedia content to your users. The more users who can access your content the better, right?

Be sure to visit the HTML5 Multimedia website, or buy the book to learn more!

January 03 2012


L’enorme fregatura dei siti di incontri online

Siete single? Siete alla disperata ricerca della vostra anima gemella? Sulla rete ci sono numerosi siti di dating on line che vi promettono di mettervi in contatto con la donna o l’uomo della vostra vita. Ma come funzionano realmente portali come Meetic e Badoo? Cosa c’è dietro al loro meccanismo di funzionamento per cui è meglio che voi ne stiate alla larga? Qualche risposta nel video…

January 01 2012


The Tools of Modern Mac-Based Web Development: New on Premium

In this week’s Premium screencast, I provide a brain-dump on all of the various tools I use for web development. Sometimes, simply watching another person work can be incredibly helpful. What tools do they use? How do they work with their code editor? I’ll cover all of these things today.

If you’re not a Tuts+ Premium member, it’s our subscription-based portion of Tuts+, where we provide high quality tutorials, ebooks, and courses on a variety of subjects. Be sure to check it out!

Tools Discussed in the Video

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...