Exploring HTML 5 Media Elements for iPhone Safari Web Pages

Exploring HTML 5 Media Elements for iPhone Safari Web Pages

Before iPhone OS 3.0, working with video inside of an iPhone Web app usually consisted of a simple link to a YouTube clip, which then launched the YouTube app. Because Safari on iPhone didn’t (and still doesn’t) support Flash video (FLV), there were few alternatives to an ordinary link when working with video. However, one of the key HTML 5 technologies that Safari on iPhone now supports is the video element.

The video element defines a video clip or stream, much like an img tag defines an image on your page. The promise of the video tag is that it eliminates the complicated hoops that developers have to go through now with embedded media content. Instead of mixing complicated object definitions and script, you can embed media with a simple tag definition.

 

Unfortunately for normal Web sites, the video element remains something of a tease, because most desktop browsers don’t yet support HTML 5. As a result, developers have to either add code for unsupported browsers or avoid its use altogether.

However, if you are creating an iPhone Web app, you don’t have this same dilemma. Safari on iPhone, starting with the OS 3.0 release, provides full support. Therefore, if you need to utilize video in your app, be sure to take advantage of the video tag.

Note that the video does not play inside the Web page as an embedded video, but instead launches the built-in iPhone media player, which occupies the full screen of the iPhone. The user then clicks the Done button to return to your app.

The basic syntax for the element is shown here:

<video src=”../video/trailer.mov” controls=”true” poster=”picture.jpg” width=”300”

height=”200”/>

Table 2-1: Attributes for video Element

Attribute
Description
autoplay
When set to true, the video plays as soon as it is ready to play.
controls
If true, the user is shown playback controls.
end
Specifies the endpoint to stop playing the video. If it’s not defined, the video plays to the end.
height
Defines the height of the video player.
loopend
Defines the ending point of a loop.
loopstart
Defines the starting point of a loop.
playcount
Specifies the number of times a video clip is played. Defaults to 1.
poster
Specifies the URL of a “poster image” to show before the video begins playing.
src
Defines the URL of the video.
start
Sets the point at which the video begins to play. If start is not defined, the video starts playing at the beginning.
width
Defines the width of the video player.

Supported video formats include QuickTime (MOV) and MPEG (MP4). Note that Safari on iPhone does not support Flash media (FLV) or Ogg Theora (OGG).

Adding a video into your app becomes as easy as adding the video tag to your page. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Video</title>

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;

user-scalable=0;"/>

<style type="text/css">

 

body

{

  background-color: #080808;

  margin: 10;

}

 

p

{

  color: #ffffff;

  font-family: Helvetica, sans-serif;

  font-size:10px;  

}

 

</style>

 

</head>

<body>

  <div style="text-align:center">

  <p>Check out the new trailer for our upcoming video game release.</p>

  <video src="../videos/tlr2_h.640.mov" controls="true" width="300"/>

  </div>

</body>

</html>

Figure 2-1 shows how Safari displays the video player. When the user touches the video player, Safari displays the video in the built-in media player, as shown in Figure 2-2.

Figure 2-1: Safari displaying the video element.

Figure 2-2: Video plays in a separate media player.

The audio element works in much the same way, although its attributes are a subset of the video tag’s set. They include src, autobuffer, autoplay, loop, and controls. Figure 2-3 shows the audio file being played in the media player.

Figure 2-3: Audio files are also played in the media player.

This article is excerpted from chapter 2 "Working with Core Technologies" of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright Wiley Publishing Inc.)

Tags:

Comments

3 responses to “Exploring HTML 5 Media Elements for iPhone Safari Web Pages”

  1. Anonymous says:

    Hello Every one!
    Will HTML 5 <video> tag support live video streaming to iPhone? i.e. can i play live video broadcast on iPhone using HTML 5 <video> tag?

  2. Anonymous says:

    I created the html page, accessed it with the iphone, changed the html page to different videos and it worked great. Maybe I did that 3 times, and now no matter what I do I can not get it to work on my IPhone again.  I have rebooted the IPhone but nothing.  Has you run into that problem?  I get no errors, but I don’t get the little box with the play button anymore.

  3. Anonymous says:

    Bearing in mind that the <video> element is from HTML5, should not the doctype of the page be:

    <!DOCTYPE HTML> ?
     

Leave a Reply

Your email address will not be published. Required fields are marked *