Stream Audio and Video with HTML 5

  • Last updated on: 2018-10-24
  • Authored by: David Hendler

In addition to the various players, you can stream your media using HTML5. Most modern web browsers and even mobile phone browsers can stream audio and video with HTML5. Other players based on Flash cannot deliver to such a wide audience. However, not every browser can play the same file, so we have to offer different formats of the same file in order to reach the most people. For audio, we can use .mp3 and .ogg, and for video we can use .mp4, .ogv, and .webm. See the Wikipedia page about HTML 5 and browser support for details on which browsers can use which format.

For these tutorials, you need to have a CDN-enabled container in your Cloud Files account:

  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 using mp3 and ogg file formats to cover the most platforms. Both formats are included in the zip archive of sample files. When you use your own audio files, you may find media.io convenient for converting mp3s into ogg files.

  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>
   ...
  1. In Cloud Files, click the action gear for the .mp3 file and select View All Links.
  2. Copy the HTTP link and paste it as the .mp3 file link in audiotest.html.
  3. In Cloud Files, click the action gear for the .ogg file and select View All Links.
  4. Copy the HTTP link and paste it as the .ogg file link in audiotest.html.
  5. Save audiotest.html and upload it to the CDN-enabled container.
  6. Click the audiotest.html link to view the audio files.

Stream video

This section describes how to use [sample video and web page files](http://81310752d5730fb4ef3c-221b4998ec12974102282b6d4a8fafbe.r2.cf1.rackcdn.com/streaming_video.zip “zip archive of video files) to download and test video streaming functionality.

HTML5 video requires three formats, .mp4, .ogv, and .webm, to ensure that you cover the most platforms. The .png image is a placeholder before your visitor starts the video. When you use your own videos, you might find the Miro Video Converter useful to convert your videos into the alternate formats. You may download this free utility directly from the Miro site or from the Apple iTunes store.

  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 on your computer and locate the .png, .mp4, .ogv, and .webm file links.

    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.

Continue the conversation in the Rackspace Community.