Information Technology Reference
In-Depth Information
Now, if you look at the bottom of the Listing 11-3, in the JavaScript, we can examine
where the real magic is happening. Here, we declare the variables for
audio
,
playButton
,
and
pauseButton
. Next, we add an event listener to each of those buttons so that when
the user clicks those buttons, we fire off some code to either play or stop the audio
stream. If we'd like, we could include additional buttons for volume, which would take a
similar form to the code above, but call
audio.volume=X
where X would be a number
between 0 and 1, indicating volume level percentage (so if you would like to increase the
volume by 10%, your code would read
audio.volume = audio.volume + .1
).
You are not just limited to pausing your audio files at will, either. Using the HTML5 Audio
Data API, you can easily control many aspects of playing or enjoying audio in a page,
such as manipulating the volume of the audio file, analyzing how many beats per minute
are in a track, creating your own audible tones combining the awesome powers of
canvas
with the Audio Data API, and a lot more.
Adding Video to Mobile Applications
Now that we've covered the wonderful world of audio, it's time to take a walk on the
visually appealing side of Internet multimedia with HTML5 video. The video tag is
another one of those new HTML5 elements to emerge over the next few years. It was
created to make the job of a developer easier and to move us away from our
dependency on Adobe Flash. Unfortunately for us, no one can really agree on a video
standard and with so many obstacles, codecs, licensing agreements, and patents
standing in our way, we are not likely to get any closer to coming up with a universal
video format for browser-based consumption anytime soon.
The good news is that since we are only focusing our efforts on Android based devices
we do not have to deal with a lot of the frustrations that come with working with HTML5
video in the desktop computing world. Here, it is very simple. A few video codecs out
there will work with Android browsers, and as long as you stick with one, or all, of them,
you will be able to present your mobile users with a richer multimedia experience.
Using the HTML5 video Tag
Invoking the HTML5
video
tag is just as easy as calling the
audio
tag we discussed
earlier in the chapter. Take a look at Listing 11-3 to see how we can use a few lines of
code to easily display video to our users.
Listing 11-3.
Basic use of the HTML5 video element
<video width="320" height="240" controls="controls" poster="video/big_buck_bunny.jpg">
<source src="video/big_buck_bunny.mov" type="video/mp4" />
<source src="video/big_buck_bunny.ogg" type="video/ogg" />
<source src="video/big_buck_bunny.webm" type="video/webm" />
Sorry! Unfortunately your browser does not support the video tag
</video>
In this example, we are just calling a video file and setting the
width
of the video
container to 320 pixels and the
height
to 240 pixels. We are also telling the video to
