The following code was featured in the book iPhone and iPad Web Design For Dummies. We include this code to save you a little typing if you are hosting your own video and want to link to it using mobile-friendly tags.
BONUS TIP: Unless you’re running a really big website and have your own video server, our best advice is that you upload your video to a third-party service, such as the Vimeo video service, and then embed the code from that video site on your own website. Delivering video in all the formats needed for mobile devices today is a complicated business and using a service like Vimeo will generally give you better results that hosting your own video on a commercial web hosting service.
Here is an example of the code needed to add an audio file in one format, using a single source:
<audio src=”favoritesong.mp3″ controls=”controls” preload=”auto”></audio>
If you have several sources, you can use the source tag to define each in the order the browser should attempt to play them in:
<audio controls=”controls” preload=”auto” >
<source src=”favoritesong.mp3″ />
<source src=”favoritesong.ogg” />
Sorry, your browser does not support the audio tag. We recommend you download the latest version of the Safari or Chrome web browser to view this page.
</audio>
Here’s the code to add a single video file to a page:
<video src=”videos/myvideo.mp4″ controls=”controls” preload=”auto” poster=”images/previewphoto.jpg” >
Sorry, your browser does not support the video tag. We recommend you download the Safari or Chrome web browser to view this page. </video>
Here is the code to add the same video in two formats (you learn more about video formats in Chapter 9 of iPhone and iPad Web Design For Dummies):
<video controls=”controls” preload=”auto” poster=”images/previewphoto.jpg” >
<source src=”videos/myvideo.mp4″ type=”video/mp4″ />
<source src=”videos/myvideo.ogg” type=”video/ogg” />
Sorry, your browser does not support the video tag. We recommend you download the Safari or Chrome web browser to view this page.
</video>
Note: The <video controls> tag at the beginning of this code example add controls when a video is played on an iPad. On an iPhone, the <video controls> tag has no effect because the built-in video player on an iPhone is launched when a video is played and it has its own controls. On an iPad, you can embed video in the page and without the <video controls> tag, your visitors won’t have a way to stop, pause or restart a video.