Embedding Video

0
197

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:

<article>
<header>
<h2>Saturate w i t h Blur</h2>
</header>
<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>
</video>
</article>

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
element:

<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” ,
“autoPlay”:false,
“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.” />
</object>
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” ,
“autoPlay”:false,
“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.

<section>
<header>
<h3>Downloads</h3>
</header>
<ul>
< 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>
</u”l>
</section>

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.

<section>
<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>
</section>

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
helpful.

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.