Embedding Video

Must Read

Canon EOS 60D, Tips for Shooting Video

Transitioning from being a still photographer to making movies might seem like a piece of cake, but you’ll find...

Debt Consolidation Loans – Help Reduce Your Debt

The current economic conditions in conjunction with high levels of consumer debt are literally tearing families apart. People continue...

How Can You Take Advantage of Black Friday Shopping Online This Year?

Black Friday shopping online has made it far easier for people to take advantage of the numerous specials that...

Home Equity Loans – Providing Optimal Service

Loans that are secured in nature are popular loans because they are approved without fusses. Various high value assets...

Home Loan Loan Refinance – Fixed Or Adjustable?

There are so many possible reasons for a home loan loan refinance. In this article, we are going to...

Best Student Loan Consolidation Companies – How to Get the Cheapest Student Loan Consolidation Rates

Whenever a student needs a debt consolidation loan, he asks a student loan consolidation company for help. People working...

AwesomeCo wants to showcase its new series of training videos on its
website, and it wants the videos to be viewable on as many devices
as possible, especially on the iPad. As a trial, we’ve been provided two
videos in the “Photoshop Tips” series that we’ll use to build a prototype.
Thankfully, we’ve been given the video files in H.264, Theora, and VP8
format, so we can focus on creating the page.4

The video tag works exactly like the audio element. We just need to
provide our sources, and Chrome, Firefox, Safari, the iPhone, the iPad,
and Internet Explorer 9 will display the video without any additional
plug-ins. The markup for our first video file, 01_blur, looks like this:

<h2>Saturate w i t h Blur</h2>
<video controls»
<source src=”video/h264/01_blur.mp4″>
<source src=”video/theora/01_blur.ogv”>
<source src=”video/webm/01_blur.webm”>
<p>Your browser does not support the video tag.</p>

We’re defining the video tag with controls. We’re implicitly telling it that
it should not play automatically by not including the autoplay attribute.
At this point, our videos play in a wide variety of browsers, and our
users will see a video player similar to the one shown in Figure 7.2, on
the next page.

We still can’t reach users of Internet Explorer 8 and older. We’ll need to
use Flash to make that work.

Safari's HTML5Falling Back

To properly support a Flash-based fallback and still use HTML5 video,
we place the Flash object code within the video tag. The site Video For
Everybody5 outlines this process in great detail, but we’ll go over a basic
implementation here.
Flowplayer6 is a Flash-based player that can play our already-encoded
H.264 video. We’ll download the open source version of the player, and
we’ll place the flowplayer-x.x.x.swf and flowplayer-controls-x.x.x.swf files in
our project’s swf folder to keep things organized.
We then place this code inside our video tag, right after our last source

<object width=”640″ height=”480″ type=”application/x-shockwave-flash”
data=”swf/flowplayer-3.2.2 ,swf”>
<param name=”movie” value=”swf/flowplayer-3.2.2.swf” />
<param name=”allowfullscreen” value=”true” />
<param name=”flashvars”val ue=’ c o n f i g = { “clip” : { “url ” : “. ./video/h264/01_blur.mp4” ,
“autoBuffering”: true
} ‘ />
<img src= “video/thumbs/01_blur.prig”
width=”640″ height=”264″ alt=”Poster Image”
t i t l e = ” N o video playback capabilities.” />
Pay close attention to this part:
Down! oad html5video/index.html
<param name=”flashvars”
val ue=’ c o n f i g = { “clip” : { “url ” : “. ./video/h264/01_blur.mp4” ,
“autoBuffering”: true
} ‘ />

The video file’s source needs to be relative to the location of Flowplayer.
Since we placed Flowplayer in the swf folder, we need to use the path
,./video/h264/01_blur.mp4 to get the player to see our video.
When we bring up our page in Internet Explorer, our video plays, and
we don’t need to encode to another format, thanks to Flowplayer. Our
Internet Explorer friends will see Figure 7.3, on the following page.
Of course, we still have to come up with a way for people who don’t
have native video support and don’t have Flash installed. To make that
happen, we’ll let people download our video content by adding another
section with download links.

< l i x a href=”video/h264/01_b1ur.mp4″>H264, playable on most platforms</ax/l i>
< l i x a href=”video/theora/01_b1ur.ogv’VOGG format</a></1 i>
< l i x a href=”video/webm/01_b1ur.webm’VWebM format</ax/1 i>

Our video in Internet ExplorerWe could use JavaScript to hide these videos if HTML5 video isn’t supported,
like this:

function c a n P l a y V i d e oO {
return ! ! d o c u m e n t . c r e a t e E l e m e n t C ‘ v i d e o ‘ ) . c a n P l a y T y p e;
i f ( c a n P l a y V i d e o ( ) ) {
$ ( # v i d e o s . d o w n l o a d s ) . h i d e ( ) ;

This uses a detection technique very similar to the one we used in Working
with Audio, on page 133. In our case, it makes more sense to let
people download these videos for use on their iPods or iPads so they
can watch them later.

Limitations of HTML5 Video

There are three very important limitations that currently limit the usefulness
of HTML5 video.
First, HTML5 video has no provisions for streaming the video files.
Users have become accustomed to being able to seek to a specific part
of a video. This is something that Flash-based video players excel at,
because of the amount of effort Adobe has put into Flash as a video

Media Content JavaScript API

In this chapter, we just briefly touched on the JavaScript APIs for
the audio and video elements. The full API can detect the types
of audio files the browser can play, and it provides methods to
control the playback of the audio elements.
In Working with Audio, on page 133, we built a page with multiple
sound samples. We could use the JavaScript API to make
all the sounds play at (roughly) the same time. Here’s a really
simplified approach:

var element = $ ( ” < p x i n p u t type=’button’ value=’Play all’/></p>”)
e l e m e n t . c l i ck(function(){
$ ( ” a u d i o ” ) .each(function(){
t h i s . p l a y O ;
} )
SC’body”) .append(element) ;

We’re creating a “Play all” button that, when pressed, cycles
through all the audio elements on the page and calls the piayO
method on each element.
We can do similar things with videos. There are methods to start
and pause elements and even auery the current time.
Unfortunately, at the time of writing, the JavaScript API isn’t well
supported everywhere. That shouldn’t discourage you from
looking at the possibilities outlined in the specification* to see
what’s possible.

delivery platform. To seek with HTML5 video, the file must be downloaded
completely on browsers. This may change in time.
Second, there’s no way to manage rights. Sites such as Hulu7 that
want to prevent piracy of their content can’t rely on HTML5 video. Flash
remains a viable solution for these situations.

Finally, and most importantly, the process of encoding videos is costly
and time-consuming. The need to encode in multiple formats makes
HTML5 video much less attractive. For that reason, you see many sites
supplying video in the patent-encumbered H.264 format so that it can
be played on the iPod and iPad, using a combination of the HTML5
video tag and Flash.
These issues aren’t going to derail HTML5, but they are things to be
aware of before we can use HTML5 video to replace Flash as a video
delivery vehicle.

Audio, Video, and Accessibility

None of the fallback solutions works really well for users with disabilities.
In fact, the HTML5 specification explicitly points that out. A hearing Impaired user won’t find any value in being able to download the
audio file, and a visually impaired user won’t have much use for a video
file they can view outside of the browser. When we provide content to
our users, we should provide usable alternatives whenever possible.
Video and audio files should have transcripts that people can view. If
you produce your own content, transcripts are easy to make if you plan
them from the start because they can come right from the script you
write. If a transcript isn’t possible, consider a summary that highlights
the important parts of the video.

<h2>Transcri pt</h2>
<p>We’ll drag the e x i s t i n g l a y e r to the new b u t t o n on the bottom of
t h e Layers p a l e t t e to c r e a t e a new copy.</p>
<p>Next w e ‘ l l go to the F i l t e r menu and choose “Gaussian Blur”.
W e ‘ l l change the b l u r amount j u s t enough so t h a t we lose a l i t t l e
b i t of the d e t a i l of the image.</p>
<p>Now w e ‘ l l d o u b l e – c l i c k on the l a y e r to e d i t the l a y e r and
change the b l e n d i n g mode to “Overlay”. We can then a d j u s t the
amount of the e f f e c t by changing the o p a c i t y s l i d e r . < / p >
<p>Now we have a s l i g h t l y enhanced image.</p>

You can hide the transcript or link to it from the main video page. As
long as you make it easy to find and easy to follow, it’s going to be really

The Future

First-class audio support in the browser opens up a ton of new possibilities
for developers. JavaScript web applications can easily trigger
sound effects and alerts without having to use Flash to embed the
audio. Native video makes it possible to make video available to devices
such as iPhones, but it also gives us an open, standard method of interacting
with videos using JavaScript. Most importantly, we’ll be able to
treat video and audio clips just like we treat images, by marking them
up semantically and making them easier to identify.


Previous articleWorking with Audio
Next articleRounding Rough Edges

Latest News

Digital Marketing for Beginners

Digital marketing for starter, Let to basic learning about connecting with your audience in the right place...

What are 7 things poor people do that the rich don’t?

1. poor people watch TV in which people read books how many hours you spend in front of the TV and when...

Top 18 best small business ideas for beginners starting

A small business can be frightening and requires plenty of careful planning there are many small business ideas which can be beneficial...

Summer that makes you happy

We saw were already here I've been thinking about some of the things. I used to do with my husband even though...

4 Point to helpful tips specifically for caregivers

What you need to take a vacation. I know it sounds impossible creative and try to make it work for you almost...

More Articles Like This