Pushing the Limits with Audio and Video - Beginning Android Web Apps Development - page 195

display its controls so the user can play, pause, stop, and manipulate the volume of the
video. You can see what this looks like on a mobile device in Figure 11-7.
Figure 11-7. Viewing an HTML5 video on an Android 2.3.4 Gingerbread device
You'll also notice that the video tag differs from the audio tag by having different
attributes. The main one that sticks out is the poster attribute, which lets us add a
screenshot (or any other image we have) to represent the video that is about to be
played. This is great for mobile devices because when you go to play a video on an
Android device, instead of playing the video in the browser as one would expect after
years of using a desktop computer, the Android device will pass the video stream along
to its built-in video player, which will play the video for you.
While this feature is fun and handy, it completely takes away a lot of the reasons
someone would use the Video Data API, since it plays the video outside of our page—in
a dedicated video application. This breaks the user experience and prevents us from
controlling exactly what the user will see when they watch our video.
In a moment, we'll give a video example similar to the one we used with the audio API
up above. However, we should note that while there are some cool things you can do
with the Video Data API, a lot of them tend to be well beyond what most people need.
The following are the basics; however, the full API is available to reference at
www.w3.org/2010/05/video/mediaevents.html. Now let's take a look at the most useful
attributes you can use when developing your next mobile web application that uses
video!
height— controls the height of the video being played
width— controls the width of the video being played
preload —If set, will preload the video when the page loads
autoplay —If set, will automatically play the video when it is ready
loop —If set, will loop the video indefinitely
controls —If set, will display controls to the user to control the video
src —The URL which points to the source of the video file