Marketing for Libraries Logo

HTML Section: Media Elements

In the past, videos, audios, and other media required a plug-in and often didn't work on all browsers. HTML5 provides some great new options for multimedia on web pages.

On this page we'll explore the new <video> and <audio> elements. We'll also look at alternative ways to incorporate media using <object> and <embed> elements. Also remember that you may want to edit any embed code you copy from social media sites like YouTube.

Video Element for HTML5

Video is a great way to add motion and sound to your project. However keep in mind that end users will need a video plug-in to video your media.

You'll want to provide specific information or guidelines to help people use your video. You may also want to indicate the type and length of the video to help end users decide whether to use your resource. It's also a good idea to provide a link to the website where the end user can download the software or plugin. such as QuickTime or Windows Media.

Keep in mind that video is not accessible to the hearing impaired, so it's important to provide alternative content.

HTML5 has a standard for showing videos. It's called the <video> element.

Use the <video> element to play a video on a web page.

The height, width, and type of video indicated in the basic code.

Formats

You can use various file formats on your website. Although downloading video files is the easiest option. It's also possible to stream video files. Go to Wikipedia to learn more about video file formats.

AVI (Audio Video Interleave) is a Microsoft format containing both audio and video. Learn more at AVI at Wikipedia.

MOV is the standard QuickTime format created by Apple for audio and video. Many digital cameras provide MOV files that can be easily uploaded to the web. Learn more at QuickTime.

MP4 (MPEG-4) is a popular format. Learn more at MPEG-4.

OGG is an open source audio-video format that is gaining in popularity. Learn more at OGG.

WebM is an open source audio-video format gaining in popularity. Learn more at WebM.

WMV is a Windows Media Video file.

Currently, only 3 video formats are supported with the <video> element: MP4, WebM, and Ogg.

The basic code looks like this:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

You can use the control attribute to add video controls like play, pause, and volume.

try itTry It!
Go to the w3schools VIDEO page. Read about the options for the video element. Then, use the Try It Yourself button to try editing the code.

 

Audio Element for HTML5

Audio is a great way to enhance your website. There are many ways to integrate audio clips into web pages. Audio can be very useful for emergent readers, people who speak or are learning foreign languages, or those learning new vocabulary. You can record sounds and save them as separate files to upload.

You'll want to provide specific information or guidelines to help people use your sound. You may also want to indicate the type and length of the audio to help end users decide whether to use your resource. It's also a good idea to provide a link to the website where the end user can download the software or plugin.

Keep in mind that audio is not accessible to the hearing impaired, so it's important to provide alternative content.

The <audio> element is used to play audio files in HTML5. In the past, special plug-ins were required.

Formats

You can use various file formats on your website. However consider that not all end-users have the plugs-in necessary to hear audio on their browser. Although downloading audio files is the easiest option. It's also possible to stream audio files. Go to Wikipedia to learn more about audio file formats.

WAV is a Microsoft/IBM file format is generally uncompressed for maximum audio quality so the files can be large. Learn more at WAV.

AU is another common audio file format. Learn more at AU file format.

MIDI standards for Musical Instrument Digital Interface and is an electronic communications protocol. These files simply transmit digital data generated by the computer. They're often used for simple, electronic music files. Learn more at MIDI.

MP3 is a lossy compressed audio file that can vary in quality. It produces small files great for sharing on the Internet. It is popular for digital audio. Learn more at MP3.

OGG is an open source format that is gaining in popularity. Learn more at OGG.

Right now, only MP3, Wav, and Ogg formats are supported. Take note that only the MP3 format works with IE9. All three work with Chrome. Encourage users to switch to Chrome.

Explore the following code:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

try itTry It!
Go to the w3schools AUDIO page. Read about the options for the audio element. Then, use the Try It Yourself button to try editing the code.

Here are some sources of free music.


Multimedia and HTML 5

The term multimedia refers to web sound, music, videos, and animation.

try itRead!
Go to w3schools and read about HTML multimedia and the various format.

HTML5 handles these differently than in the past. Unfortunately, the many formats can lead to confusion. New <video> and <audio> elements can be used with many media formats. However, you can embed others using the <object> element.

Let's explore some examples from w3schools:

This is code to play a WAV audio using the object element.

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav">
<param name="controller" value="true">
</object>

This is the code to play a SWF video using the object element.

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40">
</embed>
</object>

This is the code for playing a WMV movie using the object element.

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1"> 
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

try itTry It!
Go to the w3schools OBJECT page. Read about the options for the video element. Then, use the Try It Yourself buttons to try editing the code.

Other Media Options

Sometimes the object element doesn't meet your needs. This can be a particular problem with audio files.

Another option is the <embed> tag. Consider combining the audio element and embed element tags to provide a copy options for different browsers.

Check out some sample code from w3schools.

<audio controls="controls" height="100" width="100">
  <source src="horse.mp3" type="audio/mp3">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="100" width="100" src="horse.mp3">
</audio>

You can do the same thing with video if you're concerned about compatibility. Notice how the video element, object element, and embed element are all used in this example.

Check out some sample code from w3schools.

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

try itTry It!
Go to the w3schools EMBED page for audio and the w3schools EMBED page for video. Read about the options for the embed element. Then, use the Try It Yourself buttons to try editing the code.

Social Media Embedding Options

Many of the social media websites like YouTube provide code for embedding video and other media into web pages. In most cases, this is fine to use. However some of the code can be old or badly written.

Two options are recommended for using YouTube videos. You can use the iframe element or embed element.

Check out examples from w3schools.

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>

try itTry It!
Go to the 3schools YouTube page to learn about embedding YouTube videos and coding options. Then, use the Try It Yourself buttons to try editing the code.

Document Sharing

From Microsoft documents (i.e., Word, PowerPoint, Spreadsheets) to PDF files, there are endless documents and other files that can be added to your website and downloaded by end users.

Be sure to indicate the type of document next to the link. You may even want to create a standard logo to indicate the type of file. If possible, also include the size of the file. If it's a large file, some end users may not be able to download it. Consider cutting a very large file into smaller pieces. Offer both the entire file and also the file in segments.

Sharing Documents

The key to using documents at your website it providing enough information so that the end user can make use of the resource. Keep in mind that if you provide an Excel spreadsheet, the end user will need this software to make use of the resource. This is fine if you intend the user to adapt or expand the spreadsheet. However if you intend them to simply view the document, then convert it to a PDF file.

Another common example is newsletters, fliers, and other communications. if you want to share the newsletter you created in Microsoft Publisher, don't just upload the Publisher document. Instead, convert the document to a PDF file for sharing.

PDF

Although there are many file formats, the PDF format has become the standard. Adobe Acrobat lets you take existing documents created with a word processor or any other application and save them as PDF (Portable Document Format) file. There are also some online services that will help with this procedure.

Most browsers will now automatically show PDF files in the browser window. When sharing a PDF file, be sure to indicate that the file is in the PDF format. Also, provide a link to Adobe where people can download Adobe Reader. Learn more about how to distribute the Adobe Reader software.

PowerPoint

There are a few ways to share Microsoft PowerPoint projects.

First, you can simply upload the PowerPoint document. Downloaders will need PowerPoint to use the file. If people want to use the file and not just view it, they'll need to RIGHT-CLICK and SAVE TARGET AS. Then they'll be able to open the file in PowerPoint. This is the approach you want if you provide a template, student starter, or other document that end users might need to modify.

Second, you can save your PowerPoint as a self-running document. When end-users download the file, they'll be able to run it even if they don't have PowerPoint.

Third, export the PowerPoint document into a series of web pages.

Flash

In the past, Adobe's Flash was a popular tool for creating animations containing text, graphics, movement, audio, and even video elements. Flash projects can be saved as SWF files that can be viewed by your end users.

You'll want to provide specific information or guidelines to help people use your animation. It's a good idea to provide a link to the website where the end user can download the software or plugin at Adobe Flash Player Download Center.

Keep in mind that Flash animation is not accessible to the visually or hearing impaired, so it's important to provide alternative content.

Today, many of the things we did with Flash can be done in HTML5. Flash is built-in on most new browsers. However it's not available for some mobile devices like the iPad.

Flash Tags

You can use a text or graphic link to share your animation. You can also embed it on the page.

Separate Page

If you use the link option, it will display the animation on a separate page. This option makes your video available to the largest audience.

Example

<a href="http://eduscapes.com/flash/utahinteractive.swf">Takeoff</a>

Result

Utah Interactive

Embedded on Page

Embedding animation files is another option, however keep in mind that not all browsers can handle this option. Embedding incorporates the animation directly into the page. However, it only plays if visitors have the appropriate plug-in. It's important to include the controller, so that people can enable or disable the animation as they wish.

You can also set the animation to play or not play automatically using autoplay="true" or autoplay="false". The default is to play the animation. You can also set the height and width of the animation.

<embed src="http://eduscapes.com/flash/takeoff1.swf"> </embed>

Result


There are many sources for Flash animation. Check out our online course called AIM Your Projects with Flash.

Keep in mind that a person would need to be able to play Flash animations. It's a good idea to provide directions to downloading the correct plug-ins that will allow users to play sounds, movies, or animations.

Compatibility

The VIDEO element works on Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element. However it doesn't work on IE8.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson