Stream audio and video with HTML 5

  • Last updated on: 2018-12-13
  • Authored by: David Hendler

In addition to media players, you can stream your media by using HTML5. Most modern web browsers and even mobile phone browsers can stream audio and video with HTML5. Other players that are based on Adobe® Flash® can’t deliver to such a wide audience. However, not every browser can play the same file. As a result, content providers offer different formats of the same file to reach the most people. For audio, you can use files in .mp3 and .ogg file formats. For video, you can use the .mp4, .ogv, and .webm file formats. For details about the formats that browsers support, see HTML 5 and browser support.

CDN-enable a container

To complete the tutorials in this article, you need to have a CDN-enabled container in your Cloud Files account. Use the following steps to CDN-enable a Cloud Files container:

  1. Log in to the Cloud Control Panel.
  2. In the top navigation bar, click Select a Product > Rackspace Cloud.
  3. Select Storage > Files.
  4. Click the action gear next to the container that you want to CDN-enable.
  5. Select Make Public (Enable CDN) from the menu.
  6. On the confirmation window, click Publish to CDN.

After you complete these steps, you’re ready to learn about streaming audio and video with HTML5.

Stream audio

This section describes how to use sample audio and web page files to download and test audio streaming functionality.

HTML5 requires you to use both the mp3 and ogg file formats to maximize the number of platforms on which your media can be played. Both formats are included in the zip archive of sample files. When you use your own audio files, you might find media.io convenient for converting mp3 files into ogg files.

Use the following steps to download and test audio streaming functionality:

  1. Download the zip archive and unzip it on your computer.
  2. Upload the files into your CDN-enabled container.
  3. Open the audiotest.html file on your computer and locate the .mp3 and .ogg file links.

    The HTML should look similar to the following example:

    ...
    <audio controls>
    <source src="full/link/to/http/mp3/audio/file.mp3" type="audio/mpeg" />
    <source src="full/link/to/http/ogg/audio/file.ogg" type="audio/ogg" />
    <em>Sorry, your browser doesn't support HTML5 audio.</em>
    </audio>
    ...
    
  4. In Cloud Files, click the action gear for the .mp3 file and select View All Links.
  5. Open audiotest.html in a text editor. Copy the HTTP link and paste it as the .mp3 file link in audiotest.html.
  6. In Cloud Files, click the action gear for the .ogg file and select View All Links.
  7. Copy the HTTP link and paste it as the .ogg file link in audiotest.html.
  8. Save audiotest.html and upload it to the CDN-enabled container.
  9. Click the audiotest.html link to view the audio files.

Stream video

This section describes how to use sample video and web page files (a zip archive of video files) to download and test video streaming functionality.

HTML5 video requires you to use the following three file formats to maximize the number of platforms on which your media can be played:

  • .mp4
  • .ogv
  • .webm

The image in .png format acts as a placeholder that appears before a user starts the video. When you use your own videos, you might find the Miro Video Converter useful for converting your videos into alternate formats. You can download this free utility directly from the Miro site or from the Apple® iTunes® store.

Use the following steps to test video streaming functionality:

  1. Download the zip archive and unzip it on your computer.
  2. Upload the files into your CDN-enabled container.
  3. Open the videotest.html file in a text editor on your computer and locate the links for the .png, .mp4, .ogv, and .webm files.

    The HTML should look similar to the following example:

    <video width="356" height="200" controls poster="full/http/link/to/image/file.png"  >
    <source src="full/link/to/http/mp4/video/file.mp4" type="video/mp4" />
    <source src="full/link/to/http/ogv/video/file.ogv" type="video/ogg" />
    <source src="full/link/to/http/webm/video/file.webm" type="video/webm" />
    <em>Sorry, your browser doesn't support HTML5 video.</em>
    </video>
    
  4. In Cloud Files, click the action gear for the .png file and select View All Links.
  5. Copy the HTTP link and paste it as the .png file link in videotest.html.
  6. Copy and paste the HTTP links for the .mp4, .ogv, and .webm file types into videotest.html.
  7. Save the videotest.html file and upload it to the CDN-enabled container.
  8. Click the videotest.html link to view it.

Share this information: